如何显示嵌套对象数组中的可点击 table？

Question

我有一个包含一些可变信息的对象数组，还有另一个包含更多信息的对象数组。我正在尝试显示一个显示初始数组的 table，当用户单击该特定对象的行时，它将呈现一个新的 table，其中选择了该特定数组中的对象。

startCreateEventHandler = () => {
  this.setState({ creating: true });
};

modalCancelHandler = () => {
  this.setState({ creating: false });
};

render() {
  return (
    <div>
      {this.state.creating && (
        <Table>
          <thead>
            <tr>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            {this.props.archives.map(archive =>
              archive.ticketRequests.map(request => (
                <tr>
                  <td>{request.details}</td>
                </tr>
              ))
            )}
          </tbody>
        </Table>
      )}

      {this.state.creating ? null : (
        <Table hover className="table table-striped">
          <thead>
            <tr>
              <th>Title</th>
            </tr>
          </thead>
          <tbody>
            {this.props.archives.map(archive => (
              <tr onClick={this.startCreateEventHandler}>
                <td>{archive.title}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
    </div>
  );
}

我得到的是 table 设置正确，但是一旦我点击一行，它就会在下一个 table 中显示所有*行对象，而不仅仅是那个特定的存档。

Answer 1

如果我理解你的问题那么你还需要在状态上设置当前点击的存档并且需要解析那个选择的存档

startCreateEventHandler = (archive) => {
  this.setState({ creating: true, selectedArchive: archive });
};

modalCancelHandler = () => {
  this.setState({ creating: false, selectedArchive: undefined });
};

render() {
  return (
    <div>
      {this.state.creating && (
        <Table>
          <thead>
            <tr>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            {this.state.selectedArchive.map(archive =>
              <tr>
                  <td>{archive.details}</td>
              </tr>
            )}
          </tbody>
        </Table>
      )}

      {this.state.creating ? null : (
        <Table hover className="table table-striped">
          <thead>
            <tr>
              <th>Title</th>
            </tr>
          </thead>
          <tbody>
            {this.props.archives.map(archive => (
              <tr onClick={(event)=>this.startCreateEventHandler(archive.ticketRequests)}>
                <td>{archive.title}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
    </div>
  );
};

如何显示嵌套对象数组中的可点击 table？

How can I display a clickable table from a nested array of objects?

javascript

reactjs

redux

reactstrap