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