javascript - 尽管已设置，但 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