尽管已设置 this.state.value 未定义

Question

我是 reactjs 的新手。我从 react 文档 (https://facebook.github.io/react/docs/forms.html) 中获取了示例代码，并对其稍作修改以创建以下类：

class LoginView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {email: '',
                  password: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    alert(this.state.email);
    this.setState({email: event.target.email});
    this.setState({password: event.target.password});
  }

  handleSubmit(event) {
    alert(this.state.email);
    var response = fetch('http://0.0.0.0:5000/v1/authtoken/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify({
          email: this.state.email,
          password: this.state.password,
        })
      }).then((response) => response.json())
    var token = response.token
    alert([token])
    event.preventDefault();
  }

  render() {
    return (
      <div className="login-form">
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label htmlFor="email">Email address:</label>
            <input type="email" className="form-control" id="email" value={this.state.email} onChange={this.handleChange}/>
          </div>
          <div className="form-group">
            <label htmlFor="pwd">Password:</label>
            <input type="password" className="form-control" id="pwd" value={this.state.password} onChange={this.handleChange}/>
          </div>
          <div className="checkbox">
            <label><input type="checkbox"/> Remember me</label>
          </div>
          <button type="submit" className="btn btn-default">Submit</button>
        </form>
      </div>
    );
  }
}

export default LoginView

该类的目的是提供一个登录表单，它将电子邮件和密码字段的值发布到端点。我正在为this.state 对象的行为方式拉扯头发。

请注意，handleSubmit 和 handlechange 中都有警报。这些警报应该包含电子邮件字段的值，但它们包含值undefined。让我感到困惑的是，这些字段本身也提供了来自this.state.email 的值，实际上是有效的。这意味着状态以某种方式被保存，但它在函数中不可用。

我已经为此倾注了好几个小时，不知道我是如何得到这种行为的。任何帮助将不胜感激。

Answer 1

在 handleChange() 中，event.target.email 和 event.target.password 无效。

event 是正在更改的特定字段的 onChange 事件。 event.target 返回 DOMEventTarget (https://facebook.github.io/react/docs/events.html)，它是对调度事件的对象的引用。

因此，在您的情况下，event.target 是触发 onChange 的输入字段。

您需要将其更新为：

// If you use ES6 you can do this to use `event.target.type` as a key
handleChange(event) {
  this.setState({
    [event.target.type]: event.target.value
  });
}
// Otherwise, you can do it like this
handleChange(event) {
  var newState = {};
  newState[event.target.type] = event.target.value;
  this.setState(newState);
}

event.target.type 将返回 <input> 类型，对于您的情况，该类型是“电子邮件”或“密码”。 event.target.value 将返回您要更新的值。

附加说明：调用 .setState(nextState) 会将 nextState 浅合并到当前状态。因此，您无需在 handleChange 函数中同时更新电子邮件和密码。 https://facebook.github.io/react/docs/react-component.html#setstate