onChangeリスナーでもReactで入力値を変更できないのですが

Question

Reactにはかなり新しく、いくつかのチュートリアルを経て、私は下のコードを試していました。

私は1つのコンポーネントを作成し、店舗からそのコンポーネントに渡しました。componentWillMountコンポーネントの新しい状態を作成します。レンダリングは今までは問題ありません。

次入力ボックスの値にstateをバインドしました。私はonChangeリスナーも持っています。それでも、私はフィールドで自分の価値を変えることはできません。

私は角度の背景から来ているので、私はバインディング入力の値を次のように状態に仮定すると、の入力が自動的にstateオブジェクトのnameに更新されます。私はここに間違っていますか？

componentWillMount(){ 
      this.setState({ 
          updatable : false, 
          name : this.props.name, 
          status : this.props.status 
         }); 
     } 

    //relevant DOM from component's render function 
    <input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/> 

onTodoChange(){ 
     console.log(this); 
     //consoling 'this' here, shows old values only. 
     //not sure how and even if I need to update state here. 
     // Do I need to pass new state to this function from DOM 
     //TODO: send new data to store 
    } 

マイonTodoChange機能コンソール初期化中などの状態の同じ値を有するthisの値。入力ボックスを入力して状態を変更すると、店に送ることができます。

Answer 1

を、表示されていることthis.setState({}); を使用して状態は、あなたがそれを行うまでは変更されません反応手動で状態にします。関数の中で、その後

<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={e => this.onTodoChange(e.target.value)}/> 

と：あなたはこのような何かを行うことができ

onTodoChange(value){ 
     this.setState({ 
      name: value 
     }); 
    } 

また、あなたは、コンポーネントのコンストラクタで初期状態を設定することができます。

constructor (props) { 
    this.state = { 
     updatable: false, 
     name: props.name, 
     status: props.status 
    }; 
    } 

Answer 2

反応すると、コンポーネントは状態または小道具が変更された場合にのみ再描画（または更新）します。

変更の直後に状態を更新して、コンポーネントが更新状態値で再描画されるようにする必要があります。

onTodoChange(event){ 
      // update the state 
      this.setState({name: event.target.value}); 
    } 

Answer 3

で、なぜあなたのコンソールメッセージは古い値更新が必要なReact.jsに

角度の場合とは異なり