Aktualisieren Sie eine Eigenschaft einer Komponente aus dem übergeordneten

Question

Ich habe versucht, die Eigenschaft eines Kindes zu ändern, aber scheitern. Ich habe versucht, die meisten Lifecycle-Methoden von reagieren, aber keiner von ihnen schien zu funktionieren (didMount RequisitenUpdate usw.).

Jede Hilfe wäre

http://codepen.io/yogainalift/pen/KMPvNz

var Field = React.createClass({ 
    getInitialState: function() { 
    return { 
     message: this.props.setMessage || 'should change this one' 
    } 
    }, 

    render() { 
    return (
     <div> 
     {this.state.message} 
     </div> 
    ) 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
    return { 
     inputField: '' 
    } 
    }, 

    handle(event) { 
    console.log(event.target.value); 
    this.setState({ 
     inputField: event.target.value 
    }) 
    }, 

    render() { 
    return (
     <div> 
     <input type='text' placeholder='changing this text' onChange={this.handle}/> 
     <Field setMessage={this.state.inputField} /> 
     </div> 
    ) 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('app')); 

Answer 1

Von geschätzt werden, was ich von Ihrer Frage verstanden, versuchen Sie als Eingang das gleiche haben macht Field, sind richtig ich?

Ihre Feldkomponente Zustand mit seinem Inhalt auf

<div> 
    {this.state.message} 
</div> 

Sie sollten

verwenden

<div> 
    {this.props.setMessage} 
</div> 

Sie auch componentWillReceiveProps Lifecycle-Methode verwenden, um zu machen, einen neuen Staat für Feld zu setzen. -Code würde wie folgt aussehen:

componentWillReceiveProps: function(nextProps) { 
    this.setState({ 
    message: nextProps.setMessage || 'should change this one' 
    }); 
} 

Hoffe, es hilft.