Question

在父组件上，我试图将状态（只是图像）向下传递给2个子组件。其中一个子组件只显示图像。

另一个子组件有一个事件处理程序来更改其中一个图像。这是我的代码我没有错误但图像没有改变..谢谢！

我不包括导入以减少代码！

父组件：

 export default class Parent extends React.Component{

    constructor(){
     super();   
         this.state = {
                 img1: <img id="img1" className="img-responsive center-block" name="img1" src="img1.png"/>,
                 img2: <img id="img2" className="img-responsive center-block" name="img2" src="" />
         };
    }



    render(){       
     return (  

            <div>

                            <displayBox layers={this.state}/>
                            <eventsBox layers={this.state}/>


            </div>


         ) 
    }
}

这是显示框组件：

export default class AvatarCreationBox extends React.Component{


    render(){   


     return (                                           

                                    <div>
                                            {this.props.layers.img1}
                                            {this.props.layers.img2}
                                    </div>

         ) 
    }

}

以下是具有事件处理程序的其他子组件：

它有一个经过测试的事件处理程序，并在其末尾使用console.log。

    itemClicked(itemId,event){
            event.stopPropagation();
            if(itemId === "img3"){
                    this.props.layers.img1 = <img className="media-object" src="img3.png" alt="..."/>;
                    console.log("yo");

            }
    }

Answer 1

您需要定义一个操作父类中的状态并将其作为prop传递的函数。下一步是在事件类中调用带有新图像的函数。

将您的父类改为此

export default class Parent extends React.Component{

    constructor(){
     super();   
         this.state = {
                 img1: <img id="img1" className="img-responsive center-block" name="img1" src="img1.png"/>,
                 img2: <img id="img2" className="img-responsive center-block" name="img2" src="" />
         };

       this.changeImage = this. changeImage.bind(this)
    }

    changeImage(newImage){
        this.setState({img1: newImage});
    }

    render(){       
     return (  
            <div>
                <displayBox layers={this.state}/>
                <eventsBox 
                    layers={this.state}
                    callback={this.changeImage}/>
            </div>


         ) 
    }
}

并将事件框代码更改为以下

itemClicked(itemId,event){
    event.stopPropagation();
    if(itemId === "img3"){
        this.props.callback('<img className="media-object" src="img3.png" alt="..."/>');
        console.log("yo");
    }
}

更新：使用ES6类的React组件不再将其自动绑定到非React方法。在构造函数中添加

this.changeImage = this. changeImage.bind(this) in the constructor.

流星反应状态传递给子组件而不更新

1 个答案: