React - 一個事件處理程序來切換多個相似元素之一

Question

我試圖通過重建代理網站來實踐React。我正在製作一個有員工圖像的部分，點擊其中一張圖像可以打開相關的員工生物模型。圖像和BIOS是分開的包含div。

感覺就像我應該能夠編寫一個事件處理程序，根據點擊哪個圖像來查找並打開相關生物（可能使用類似data屬性的東西？），但我無法弄清楚我的「 d需要添加。

目前我只是有一個點擊處理程序切換一個'活躍'狀態。然後將該狀態添加爲className以切換模式是否顯示。問題的關鍵在於它不區分BIOS，所以無論點擊哪個生物，它們都會顯示。

在情況下，它是非常有用的，這是我的員工生物「組件：

const StaffBio = (props) => { 
return (
    <div className={`teamMemberOverlay ${props.active}`} onClick={props.onClick}> 
     <div className="teamMemberExpanded"> 
      <h6>{props.name}</h6> 
      <div className="seperator"></div> 
      <p className="title">{props.title}</p> 
     </div> 
    </div> 
); 
} 

正在使用這樣的：

<StaffBio name="NAME HERE" title="TITLE HERE" active={this.state.active} onClick={this.showBio} /> 

到目前爲止，我已經有了設置爲圖像如下：

<img src={PaulIllustration} className="staffPhoto" onClick={this.showBio} /> 

最後，我的事件處理程序：

showBio() { 
    let toggle = this.state.active === 'is-active' ? '' : 'is-active'; 
    this.setState({active: toggle}); 
} 

Answer 1

class AboutUsSlider extends Component { 
    constructor(props) { 
    super(props); 
    this.showBio = this.showBio.bind(this) 
    this.next = this.next.bind(this) 

    this.state = { active: null } 
} 

next() { 
    this.refs.slider.slickNext() 
} 

showBio(id) { 
    this.setState({active: id}); 
} 
hideBio(){ 
    this.setState({active: null}); 
} 

render() { 
    var settings = {...} 
    const people = [{name: 'Paul', title: 'some title'}, {name: 'Ben', title: 'other'}, ...]; 

return (
    <div> 
    <Slider ref="slider" {...settings}> 
    <div className="sliderPage"> 
     <h2>Meet our team</h2> 
     <div className="seperator"></div> 
     <div className="teamPhotos"> 
     { // When setting the index, you should use something unique, I'll use the name here. 
     people.map((p, index) => 
      <img key={p.name} src={`${p.name} + 'Illustration'`} className="staffPhoto" onClick={() => this.showBio(index)}) /> 
     } 
     </div> 
     <Button BGColor="#009ECC" text="Our process" onClick={this.next} /> 
    </div> 
    </Slider> 
    { this.state.active && <StaffBio name={people[this.state.active]} title={people[this.state.active].title} onClick={this.hideBio}/> 
    </div> 
) 
} 

EDITED

有一對夫婦的事情可以做。

每個人可能都有一個ID來標識它。所以，你可以修改你的showBio看起來像這樣：

showBio(id) { 
    this.setState({ active: id }) 
} 

這樣一來，你這人是目前在您的狀態活躍。

你還需要改變你的img

<img src={PaulIllustration} className="staffPhoto" onClick={() => this.showBio(PaulId)} /> 

凡PaulId將是每個人不同。

而且你StaffBio：

<StaffBio name="NAME HERE" title="TITLE HERE" active={this.state.active == personId} onClick={this.showBio} /> 


const StaffBio = (props) => { 
    return (
    <div className={`teamMemberOverlay ${props.active ? 'is-active' : ''}`} onClick={props.onClick}> 
    <div className="teamMemberExpanded"> 
     <h6>{props.name}</h6> 
     <div className="seperator"></div> 
     <p className="title">{props.title}</p> 
    </div> 
    </div> 
); 
}