Question

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

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>
  );
}

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

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>
  );
};

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

1 个答案: