未在表单上设置React js状态

Question

First am pretty new to react. Am trying to change state of form inputs as follows

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 
}

My problem is I am not able to set the state of the password field and instead am getting a warning saying Warning: A component is changing a controlled input of type password to be uncontrolled My render method is as bellow

 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>
    );
}

Note: I have omitted some code that I think is not crucial.

Answer 1

Just change:

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

for:

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

The event has an attribute target which has an attribute value with the value of the field at that particular moment. Hence you should assign that value to the pwd state attribute that you are defining :)

Always remember that you are sending an object to the setState function. The key of that object is the one that you are defining ( pwd ). The value is just the thing that you assign to that key, it could be a number, a string... or the value of an object's attribute (like in this case the string that contains event.target.value ).

Answer 2

I'll show you a little snippet that I'm using in production:

This is your state:

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

So, now you may want to build a form in order to change these values. I'd recommend to do so:

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

So now you can do so:

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

e.target.name takes the name of your input field (in that case: 'pwd' or 'email') and e.target.value takes its value.

When you're writing more complex forms, this can help you a lot!