reactjs - 为 .map() 函数中的每个组件绑定(bind) onClick

Question

我创建了一个父组件PicturesFetch，它渲染另一个(子)组件，Picture，它渲染一个带有图片的div。现在，为了渲染 Picture，PicturesFetch 会遍历一个对象(图片)，并使用 .map() 函数创建多个包含图像的 div。我希望能够更改单独创建的每个元素的状态。这是我到目前为止所尝试的，测试的绑定(bind)是一一尝试的，而不是一起尝试的:

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

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

我简化了示例代码。现在，通过将绑定(bind)放置在位置 #1 和 #2，所有 图像状态会一起更改，而在 #3 中则会出现错误无法读取未定义的属性“setState” 。

绑定(bind) onClick 函数的正确位置是哪个，以便我可以单独访问每个图像状态？也许我的结构有缺陷？预先感谢您。

Answer 1

您可以使用 #1 或 #3 来绑定(bind) onClick 函数。在#3 中，您在handlePictureClick 中遗漏了这一点。

第二部分分别访问每个图像状态。您必须将 isSelected 和 pictureClassName 键放入每个图片对象中。和handlePictureClick可以修改如下。

     handlePictureClick (pic){
          this.setState(pics : this.state.pics.map(function(picture){
              if(picture.id === pic.id){
                if(picture.isSelected){
                   picture.isSelected = false;
                   picture.pictureClassName = "picture-div none";
                } else {
                   picture.isSelected = true;
                   picture.pictureClassName = "picture-div green";
                }

              }
              return picture; 
          ));
    }

  render() {
     var changeClass = this.state.pictureClassName;
        var pics = this.state.pics.map(function(pic, i) {
            if (/*something*/) {
                return (
                <div className="pic-div" key={i} >
                    <Picture 
                        isSelected={pic.isSelected}
                        pictureClassName={changeClass}
                        onClick={this.handlePictureClick.bind(this, pic)} 
                    />
                </div>
                }
            });
        return (
        <div className="Options-container">
            <div className="container">{pics}</div>
        </div>
        );
}