Question

我试图通过重建代理网站来实践React。我正在处理一个有人员图像的部分，然后单击其中一个图像以模态打开相关的人员生物。图像和BIOS在单独的包含div中。

感觉我应该能够编写一个事件处理程序，根据点击的图像（可能使用类似数据属性？）找到并打开相关的bio，但是我无法弄清楚我和＃39; d需要添加。

目前我只有一个点击处理程序，可以切换一个活跃的＆＃39;州。然后将该状态添加为className以切换模式是否显示。问题当然是它没有区分bios，所以无论点击哪个生物都会显示出来。

如果它有用，这里是我的员工生物＆＃39;成分：

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

最后，我的事件处理程序：

isearch

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

你可以做几件事。

每个人都可能有身份证明。因此，您可以修改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>
  );
}

React - 一个事件处理程序，用于切换多个类似元素之一

1 个答案: