React-Bootstrapフォームは、値がthis.state.valueに設定されている場合にのみタイプできますか？

Question

私が初めて反応し、ブートストラップを使用していると私は私のコンポーネント私のコードでは現在、ここhttps://react-bootstrap.github.io/components.html#forms

を議論したように自分のフォームコンポーネントを使用しようとしていたが、次のようになります。

 <form> 
     <FormGroup controlId="formEmail" > 
      <ControlLabel>Email</ControlLabel> 
      <FormControl 
      type="text" 
      value={this.state.loginInput.email} 
      placeholder="Email" 
      /> 
     </FormGroup> 
     <FormGroup controlId="formPassword" > 
      <ControlLabel>Password</ControlLabel> 
      <FormControl 
      type="text" 
      value={this.state.loginInput.password} 
      placeholder="Password" 
      /> 
     </FormGroup> 
     </form> 

フォームが正しくレンダリングreat-bootstrapページの指示に基づいて予想どおりに動作しますが、入力を入力しようとすると何も起こりません。私はそれが動作しませんvalueを除く他の何かにthis.state.valueをしようとした場合、私はvalue={this.state.loginInput.password}からvalue={this.state.value}

に次の行を変更した場合、私は唯一の入力に入力することができます。私のコンストラクタは、このところで次のようになります。

constructor(props) { 
    super(props); 
    this.state = { 
     showModal: false, 
     loginInput: { 
     email: '', 
     password: '', 
     }, 
    }; 

反応し、ブートストラップは私が自分自身の価値を使わせていない理由はありますか？

Answer 1

解決策は、私がOnChange機能を持っていることを必要とすることが必要であると思われる入力フィールドは、読み取り専用ですか？これは奇妙な動作のようですが、onChangeイベントを定義するためにフォームを変更するだけで、フォームが期待どおりに動作することができました。

 <FormGroup controlId="formPassword" > 
      <ControlLabel>Password</ControlLabel> 
      <FormControl 
      type="text" 
      value={this.state.loginInput.password} 
      placeholder="Password" 
      onChange={this.handleChange} 
      /> 
     </FormGroup>