次のリアクションコードはなぜ機能しますか？

Question

私は入力要素をタイプしている間、p要素をリアルタイムで更新しようとしています。次のリアクションコードは完全に機能します。しかし、value属性をinput要素から完全に削除すると、コードはまだ動作します！

class ControlledInput extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      input: '' 
     }; 
    } 
    handleInput = (event) => { 
     this.setState({ 
      input: event.target.value 
     }); 
    } 
    render() { 
    return (
     <div> 
     <input 
      value={this.state.input} 
      onChange={this.handleInput} /> 
     <p>Input: {this.state.input}</p> 
     </div> 
    ); 
    } 
}; 

は、だから私の質問は以下のとおりです。

• value={this.state.input}ラインは何をしますか？
• なぜプログラムはまだその行なしで動作しますか？

Answer 1

value={this.state.input}は、コンポーネントの入力ボックスにフォームの値を割り当てます。 テキストボックス内のテキストを変更して反応しても入力が再描画されないと、イベントハンドラがまだ起動するため、コードは引き続き動作します。入力値の状態は暗黙のうちにDOMの状態ですが、この状態はコンポーネントからのものではありません。

同じ状態を使用する2つの入力があった場合、入力すると2番目の入力は更新されません。これは、value={this.state.input}を省略したため、予想外のものが表示されます。それを両方の入力値に含めると、テキストボックスはお互いに反映されます。上記のコードで

class ControlledInput extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      input: '' 
     }; 
    } 
    handleInput = (event) => { 
     this.setState({ 
      input: event.target.value 
     }); 
    } 
    render() { 
    return (
     <div> 
     <input 
      onChange={this.handleInput} /> 
     <p>Input: {this.state.input}</p> 



     <input 
      onChange={this.handleInput} /> 
     <p>Input: {this.state.input}</p> 
     </div> 
    ); 
} 
}; 

両方が同じ状態を有していなければならない場合、入力者の一つが更新されません:)

Answer 2

= {} this.state.inputライン値が何をしますか？

この行はinput変数あなたの状態を使用して、入力からvalue属性を設定し、あなたのケースでは、開始時に''（何も）でそれを初期化します（つまり、これは<input value="" ...>と同等です） あなたを変更した場合あなたは、入力値は、あなたのプログラムの開始時にfooにどのように変化するかを確認する必要があり

this.state = { 
     input: 'foo' 
    }; 

のようなものにthis.state.input。

なぜプログラムはまだその行なしで動作しますか？

すでに開始時に空に設定されているため、プログラム内で実際に何も変更されないためです。あなたのonChangeイベントハンドラはまだ起動します。