React - 複数の類似した要素の1つを切り替えるための1つのイベントハンドラ

Question

私は、代理店のWebサイトを再構築することによってReactを実践しようとしています。私はスタッフの画像を持っているセクションで作業しています。その画像の1つをクリックすると、関係するスタッフのバイオがモーダルで開きます。画像とバイオスは別々のdivを含んでいます。

画像がクリックされた（おそらくデータ属性のようなものを使用していますか？）という状況に応じて関連するバイオを見つけて開くイベントハンドラを作成できるはずですが、 dを追加する必要があります。

現在、私はちょうど「アクティブな」状態を切り替えるクリックハンドラを持っています。その状態は、モーダルが表示されているかどうかを切り替えるためにclassNameとして追加されます。問題はバイオスを区別しないので、どのバイオがクリックされても関係なく表示されるという問題です。

場合、それは便利ですが、ここに私の「スタッフのバイオ」コンポーネントです：

次のように使用されている

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

この方法では、あなたの状態で現在アクティブになっている人を取得します。

またPaulIdは人それぞれで異なるだろうあなたのimg

<img src={PaulIllustration} className="staffPhoto" onClick={() => this.showBio(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> 
); 
}