Состояние реакции Meteor, переданное дочернему компоненту, не обновляется

Question

В родительском компоненте я пытаюсь передать состояние (только изображения) до двух дочерних компонентов. Один из дочерних компонентов просто отображает изображения.

В другом дочернем компоненте есть обработчик события для изменения одного из изображений. Вот мой код У меня пока нет ошибок, но изображение не меняется .. Спасибо!

Я не включаю импорт, чтобы сократить код!

Родитель компонент:

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

Update: Реагировать компоненты с использованием классов ES6 больше не autobind это Неправительственные Реагировать методы. В вашем конструкторе добавьте

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