React jsフォームに設定されていない状態

Question

最初に反応するのはかなり新しいです。 は私の問題は、私はWarning: A component is changing a controlled input of type password to be uncontrolled はrenderメソッドをマイ言って警告を取得しています代わりに、パスワードフィールドの状態を設定することはできないですし、ある

constructor(props) { 
    super(props); 
    this.state = { 
     pwd:'', 
     email:'', 
     value:'' 
    }; 
    this.handleEmailChange = this.handleEmailChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handlePasswordChange = this.handlePasswordChange.bind(this); 
} 
handlePasswordChange(event){ 
    //this.setState({value: event.target.value});//Works 
    this.setState({pwd: event.target.pwd});// Fails 
} 

次のようにフォーム入力の状態を変更しようとしていることなど怒鳴る

です

render(){ 
    return(
     <div 
     className="container col-md-6 col-md-offset-3" 
     > 
     <Form horizontal onSubmit={this.handleSubmit}> 
      <FormGroup 
      controlId="formHorizontalEmail"> 
       <Col componentClass={ControlLabel} sm={2}> 
        Email 
       </Col> 
       <Col sm={10}> 
        <FormControl type="email" placeholder="Email" 
           value={this.state.email} onChange={this.handleEmailChange}/> 
       </Col> 
      </FormGroup> 
      <FormGroup 
       controlId="formHorizontalPassword" 
       > 
        <Col componentClass={ControlLabel} sm={2}> 
         Password 
        </Col> 
        <Col sm={10}> 
         <FormControl type="password" placeholder="Password" 
            value={this.state.pwd} onChange={this.handlePasswordChange} 
          //if I change to value={this.state.value} it works 
         /> 
        </Col> 
      </FormGroup> 
      <FormGroup> 
       <Col smOffset={2} sm={10}> 
        <Checkbox>Remember me</Checkbox> 
       </Col> 
      </FormGroup> 
      <FormGroup> 
       <Col smOffset={2} sm={10}> 
        <Button type="submit"> 
         Sign in 
        </Button> 
       </Col> 
      </FormGroup> 
     </Form> 
     </div> 
    ); 
} 

注：私は重要ではないと思ういくつかのコードを省略しました。

Answer 1

だけ変更：用

this.setState({pwd: event.target.pwd});// Fails 

：

this.setState({pwd: event.target.value}); 

をイベントは、その特定の時点のフィールドの値を持つ属性valueを持つ属性targetを持っています。したがって、定義しているpwd状態属性にその値を割り当てる必要があります。

オブジェクトをsetState関数に送信していることを常に覚えておいてください。そのオブジェクトのキーは、定義しているものです（pwd）。値は、そのキーに割り当てるものです。数字、文字列、またはオブジェクトの属性の値（この場合はevent.target.valueを含む文字列）になります。

Answer 2

私はあなたに私が制作に使用している少し抜粋紹介：これはあなたの状態である

を：

constructor(props) { 
super(props); 
this.state = { 
    pwd:'', 
    email:'' 
}; 

だから、今あなたが変更するために、フォームを作成することもできますこれらの値。私はそうすることをお勧めします：

<input name="pwd" onChange={(e) => this.handleChange(e)} ...> 
<input name="email" onChange={(e) => this.handleChange(e)} ...> 

をだから今、あなたがそうすることができます。

handleChange(e){ 
this.setState({[e.target.name]: e.target.value}) 
} 

e.target.nameがあなたの入力フィールドの名前を取ります（その場合には「PWD」または「メール」） e.target.valueがその値をとります。

もっと複雑なフォームを作成している場合は、これが非常に役に立ちます！