如何访问已映射到表行的数组中的特定项目？ - 反应

Question

我正在使用 React.js 在我们的网站上创建一个名称列表。人员信息作为对象存储在数组中。我已经成功地使用 .map 在表格行中创建列表，现在我希望能够将鼠标悬停在每个给定名称（或真的）上，以创建一个包含来自同一对象的更多信息的弹出窗口。 我的问题在于再次访问正确的对象。我不确定如何在 handleMouseEnter 函数中正确引用它。

这里有一些代码：

class PersonList extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseEnter() {
    alert(patients[???].phone});
  }
  handleMouseLeave() {

  }

  render() {

    let list = patients.map((patients, p) =>
     <tr  onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
          key={'patient_' + p}>{patients.name}</tr>)

    return(
      <div className="list">
        <table>
          {list}
        </table>
      </div>
    );
  }
}

警报功能只是一个占位符。我猜我的问题实际上在于当我用 .map 创建表时声明了一些不同的东西，但我不确定。

Answer 1

试试：

let list = patients.map((patient, p) =>
   <tr  onMouseEnter={()=>{this.handleMouseEnter(patient)}}

和：

handleMouseEnter(patient) {
    alert(patient.phone);
  }

仅供参考：这并不是最高效的做事方式，但应该可以帮助您入门。通常不鼓励在渲染中使用绑定和箭头函数。