Question

我正在尝试使用React创建一个手风琴但是我从Json API接收我的数据，我动态地使用它来制作表格。一切正常。但是，当我尝试创建toggleHidden函数时，它会打开每个视图而不是我刚刚单击的视图。如何在点击时定位特定组件，而不是仅使用此

<Table striped bordered condensed hover>
  <thead>
    <tr>
      <th>Asset #</th>
      <th>Description</th>
      <th>Person</th>
      <th>Username</th>
      <th>Room</th>
      <th>ID</th>
      <th>Patches</th>
      <th>Date</th>
      <th>Java</th>
      <th>AACV</th>
    </tr>
   </thead>

   {this.state.items.map((data, key) => {
     return (
       <tbody>
         <tr 
           id={data.name} 
           onClick=`{this.toggleHidden.bind(this)} 
         >`
           <td>{data.name}</td>
           <td >{data.height}</td>
           <td>{data.mass}</td>
           <td>{data.gender}</td>
           <td >{data.birth_year}</td>
           <td>{data.eye_color}</td>
           <td >{data.birth_year}</td>
           <td>{data.eye_color}</td>
           <td >{data.birth_year}</td>
           <td>{data.eye_color}</td>
         </tr>
         <td 
           className={data.name} 
           colSpan="10"
         > 
          {!this.state.isHidden && <Filled/>}
         </td>
       </tbody>
     )
   })}
 </Table>



 toggleHidden (e) {
    this.setState({
        isHidden: !this.state.isHidden
    })
}

Answer 1

你需要为每个意味着

的键设置嵌套状态

const { Table, Icon } = semanticUIReact;

const ITEMS = [
  {
    asset: "Asset 1",
    description: "Description"
  },
  {
    asset: "Asset 2",
    description: "Description2"
  }
];
class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = { items: ITEMS };
    this.renderRow = this.renderRow.bind(this);
  }

  render() {
    return (
      <Table striped bordered condensed selectable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Asset</Table.HeaderCell>
            <Table.HeaderCell>Description</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>{this.state.items.map(this.renderRow)}</Table.Body>
      </Table>
    );
  }

  renderRow(data, key) {
    return (
      <Table.Row onClick={() => this.toggleHidden(key)}>
        <Table.Cell>{data.asset}</Table.Cell>
        <Table.Cell textAlign="right">
          {this.state[key] ? "This is hidden" : data.description}
        </Table.Cell>
      </Table.Row>
    );
  }

  toggleHidden(key) {
    this.setState({
      [key]: !this.state[key]
    });
  }
}

ReactDOM.render(<Example />, document.getElementById("react"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-react@0.79.1/dist/umd/semantic-ui-react.min.js"></script>

<div id="react"></div>

Answer 2

我建议你使用组件的强大功能。为表中的行创建组件，如下所示：

export default class Row extends React.Component {

 render() {
   const { data } = this.props;
         <tbody>
         <tr 
           id={data.name} 
           onClick=`{this.toggleHidden.bind(this)} 
         >`
           <td>{data.name}</td>
           <td >{data.height}</td>
           <td>{data.mass}</td>
           <td>{data.gender}</td>
           <td >{data.birth_year}</td>
           <td>{data.eye_color}</td>
           <td >{data.birth_year}</td>
           <td>{data.eye_color}</td>
           <td >{data.birth_year}</td>
           <td>{data.eye_color}</td>
         </tr>
         <td 
           className={data.name} 
           colSpan="10"
         > 
          {!this.state.isHidden && <Filled/>}
         </td>
       </tbody>
 }
 toggleHidden() {
  this.setState(state => ({
    isHidden: !state.isHidden 
}));
}
}

并在您的主要组件中执行以下操作：

<Table striped bordered condensed hover>
  <thead>
    <tr>
      <th>Asset #</th>
      <th>Description</th>
      <th>Person</th>
      <th>Username</th>
      <th>Room</th>
      <th>ID</th>
      <th>Patches</th>
      <th>Date</th>
      <th>Java</th>
      <th>AACV</th>
    </tr>
   </thead>

   {this.state.items.map((data, key) => <Row data={data} />}
 </Table>

它更具可读性，更具反应风格，让每一行都能处理自己的状态

（可能存在一些语法错误，但概念正在发挥作用）

祝你好运！

尝试使用react来触发具有相同功能的不同组件

2 个答案: