Question

首先我很陌生。我试图改变表单输入状态如下

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 
}

我的问题是我无法设置密码字段的状态，而是收到警告Warning: A component is changing a controlled input of type password to be uncontrolled 我的渲染方法如下所示

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

该事件的属性target具有属性value，其中包含该特定时刻字段的值。因此，您应该将该值分配给您定义的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'或'email'），e.target.value获取其值。

当你写更复杂的表格时，这可以帮到你很多！

React js State未在表单上设置

2 个答案: