我创建了一个父组件PicturesFetch，它呈现另一个（子）组件，Picture它呈现一个里面有图片的 div。现在，要渲染Picture，PicturesFetch遍历一个对象（图片）并使用 .map() 函数创建多个带有图像的 div。我希望能够更改单独创建的每个元素的状态。这是我到目前为止尝试过的，测试的绑定是一个一个尝试的，而不是全部一起尝试：
图片获取.js
class PicturesFetch extends React.Component {
constructor(props) {
super(props);
this.state = {
isSelected: true,
pictureClassName: "picture-div green",
pics : [/*Object witch contains names and src of the images*/]
};
this.handlePictureClick = this.handlePictureClick.bind(this); /*#1 tested bind*/
}
handlePictureClick (isSelected){
if (!isSelected) {
this.setState({
isSelected: true,
pictureClassName: "picture-div green"
})
} else {
this.setState({
isSelected: false,
pictureClassName: "picture-div none"
})
}
}
render() {
var changeClass = this.state.pictureClassName;
var handlePictureClick = this.handlePictureClick.bind(this); /*#2 tested bind*/
var pics = this.state.pics.map(function(pic, i){
if (/*something*/) {
return (
<div className="pic-div" key={i} >
<Picture
isSelected={isSelected}
pictureClassName={changeClass}
onClick={handlePictureClick.bind(this, isSelected)} /*#3 tested bind*/
/>
</div>
});
}
return (
<div className="Options-container">
<div className="container">{pics}</div>
</div>
);
}}
图片.js
class Picture extends React.Component {
constructor(props) {
super(props);
this.state = {
isSelected: true,
pictureClassName: "picture-div green"
};
}
render() {
var pictureClassName = this.props.pictureClassName;
return (
<div onClick={this.props.onClick} className={pictureClassName}>
<img src={this.props.src} alt={this.props.name} />
<h5>{this.props.name}</h5>
</div>
)
}}
我简化了示例代码。现在，通过将绑定放置在位置 #1 和 #2 一起更改所有图像状态，而在 #3 中给我错误无法读取 undefined 的属性 'setState'。
哪个是绑定 onClick 函数的正确位置，以便我可以分别访问每个图像状态？也许我的结构有缺陷？先感谢您。