子要素に渡されたメテオの反応状態が更新されない

Question

親要素では、状態（画像のみ）を2つの子要素に渡そうとしています。子コンポーネントの1つが画像を表示するだけです。

他の子コンポーネントには、画像の1つを変更するイベントハンドラがあります。 ここに私のコードはありますが、まだエラーは発生していません。イメージは変更されていません..ありがとう！

コードを減らすためのインポートは含まれていません！

親コンポーネント：

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で動作するこのイベントハンドラoそれ。

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

親クラスの状態を操作して小道具として渡す関数を定義する必要があります。次のステップは、あなたのイベントクラスの中で新しいイメージで関数を呼び出すことです。

この

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クラスを使用してコンポーネントを反応させるの自動バインド以外に、このメソッドを反応します。あなたのコンストラクタには、

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