Question

我是reactjs的新手。我从反应文档（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

尽管设置了this.state.value仍未定义

1 个答案: