ReactJs即時に値を印刷

Question

私はreactjsを新しくして、入力フィールドの更新値を印刷しようとしています。私が最初に試みたのはこれでした：

var App = React.createClass({ 
    render() { 
    return <div> 
     <h1>Hello, {this.props.name}</h1> 
     <input type="text" onKeyUp={this.handleChange} /> 
     <p>{this.handleChange}</p> 
    </div>; 
    }, 
    handleChange: function(event) { 
    return event.target.value; 
    } 
}); 
App = React.createFactory(App); 

React.render(
    <App name="World" />, 
    document.getElementById('mount-point')); 

しかし、なぜそれが動作していないのか分かりません。私はこれを試してみましたより：CodePenは多分誰かがあなたがthis.stateにコンポーネントのすべての状態を保存しなければならない

Answer 1

var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      text: "", 
     }; 
    }, 
    handleChange: function(event) { 
     this.setState({ text: event.target.value }); 
    }, 
    render() { 
     return <div> 
      <h1>Hello, {this.props.name}</h1> 
      <input type="text" onChange={this.handleChange} /> 
      <p>{this.state.text}</p> 
     </div>; 
    }, 
}); 

<p>要素に瞬時に入力フィールドの値を印刷して私を助けることができます。 this.setStateを使用して状態を更新してください。状態を更新すると、コンポーネントは新しい状態で自動的に再レン​​ダリングされます。

段落の内容は、状態の現在の値です。テキスト入力の状態の変化を処理するためにonKeyUpの代わりにonChangeが一般に使用されます。 handleChangeは、テキスト入力が変更されたときの状態を更新します。