Question

我正在构建一个包含员工图像列表的页面，然后点击它们会打开一个模式来显示他们的姓名和职位。

我是React的新手，但我认为这样做的方法是映射包含员工详细信息的数组，并使用onClick事件使用员工的姓名/职位更新状态你点击了，然后在模态中使用它。

例如，我的员工列表可能类似于：

const people = [{name: 'Paul', title: 'some title'}, {name: 'Ben', title: 'other'}];

我正在这样映射：

const peoplelist = people.map((p, index) => {
    return (
      <img key={p.name} src={`${p.name}Illustration`} className="staffPhoto" onClick={() => THIS IS WHERE I'M STUCK} />
  );
});

为了在我的模型组件中消耗该状态，如下所示：

<StaffBio name={this.state.name} title={this.state.title} onClick={this.hideBio}/>

我正在努力解决的问题是onClick应该捕获点击的员工的姓名/职位并将其置于州内。

正如我所说，我是React的新手，所以我可以从完全错误的角度来看待它。

Answer 1

您只需将所需的详细信息传递给onClick事件回调即可。喜欢

const peoplelist = people.map((p, index) => {
    return (
      <img key={p.name} src={`${p.name}Illustration`} className="staffPhoto" onClick={() => this.setEmployeeDetails(p.name, p.title) } />
  );
});

并创建一个回调函数来设置组件中的状态。像

setEmployeeDeatils(empName, jobTitle){
  this.setState({empName: empName, jobTitle: jobTitle});
}

React - 基于array.map中的对象值设置状态

1 个答案: