作出反應 - 在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}); 
}