javascript - React - 一个事件处理程序来切换多个相似元素之一

Question

我正在尝试通过重建一个代理网站来练习 React。我正在研究一个包含员工图像的部分，单击其中一张图像会以模式打开相关员工简介。图像和 BIOS 位于单独的包含 div 中。

感觉我应该能够编写一个事件处理程序，根据单击的图像查找并打开相关的生物(也许使用数据属性之类的东西？)，但我不知道我要做什么需要添加。

目前我只有一个点击处理程序来切换“事件”状态。然后将该状态添加为类名以切换模式是否显示。当然，问题在于它不区分 BIOS，因此无论单击哪个 Bio，它们都会显示。

如果它有用，这是我的“员工简介”组件:

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

已编辑

您可以执行以下几项操作。

每个人可能都有一个 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>
  );
}