Question

我想查找表中单击的行的ID。例如，我搜索一本标题为``精通''的书，并且有两本书标题相同但作者不同，这些书会正确显示在表中。我想做的是，当我单击表格中的特定书时，它应该在输入框中打开一个包含书本详细信息的模态，但是当我单击任何一本书时，该模本会只弹出其中一本书的详细信息这些书。

当我输入搜索字词（“精通”）时，我会得到两个建议，这是预期的行为。

当我单击建议的搜索词（“精通”）并按Enter或搜索按钮时。表格中将填充所有具有该标题（“精通”）的书籍。也是预期的行为。

现在，当我单击标题为“精通”的书的第一个实例时，这就是我在模态中得到的结果。

当我单击第二个实例时。我明白了。

您意识到这是模态中显示的同一本书。

预期行为： 我希望能够单击表中的一本书，并且该行中的书会显示在模式中。

withInitial

Answer 1

在tr组件的TableRow元素上将需要某种ID或索引。您可以实现目标，而无需在代码中添加任何额外的react元素，但是您的onClick函数回调必须能够获取实际值。

如果您看下面的代码：

import React from "react";
import ReactDOM from "react-dom";

const data = [
  { id: "one", firstname: "john", lastname: "smith" },
  { id: "foo", firstname: "peter", lastname: "parker" }
];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clicked_id: null
    };
  }

  onClick = event => {
    const id = event.currentTarget.getAttribute("data-rowid");
    console.log(id);
    this.setState({ clicked_id: id });
  };

  render() {
    return (
      <div>
        <div>Clicked ID: {this.state.clicked_id}</div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {data.map(e => (
              <tr key={e.id} data-rowid={e.id} onClick={this.onClick}>
                <td>{e.id}</td>
                <td>{e.firstname}</td>
                <td>{e.lastname}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您会看到tr实际上有一个data-rowid元素，该元素随后被onClick方法用来提取值。您可以使用其他标签，我只是为自己选择了一个标签。

编辑以添加：

如果您想看一下上面的代码，请查看以下代码和框链接：

https://codesandbox.io/s/4368l97lqx

第二次修改：

您可以重构您的TableRow组件以使用所需的参数来调用openBookDetails prop函数：

class TableRow extends React.Component {
  handleClick = (event) => {
    event.stopPropagation();
    const { row, openBookDetails } = this.props;
    openBookDetails(row._id);
  };

  render() {
    const { row } = this.props;
    return (
       <tr className="table-light" onClick={this.handleClick}>
        <th scope="row">{row.title}</th>
        <td>{row.author}</td>
        <td>{row.isbn}</td>
        <td>24</td>
      </tr>
    );
  }
}

Answer 2

根据下面突出显示的代码：

<tbody>
            {data.map(row => 
                <TableRow key={row._id} row={row} openBookDetails={openBookDetails}/>
            )}
            {/* Remove key={row.id} inside TableRow because it is not used to set the data in the table */}
</tbody>

我认为您需要将行值传递给openBookDetails，例如：

<TableRow key={row._id} row={row} openBookDetails={openBookDetails(row)}/>

，并相应地使用在openBookDetails函数内部发送的行值

查找表中单击的行

2 个答案: