作出反应 - 在array.map

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应该是captur e点击员工的姓名/职位，并将其置于该州。

正如我说的，我是新来做出反应，所以我可以在这个完全从错误的角度到来。

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