reactjs - 当我单击“提交”按钮时，如何获取包含电子邮件和密码的对象

Question

我正在尝试获取一个对象 {email:"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfaeadac8fa8a2aea6a3e1aca0a2" rel="noreferrer noopener nofollow">[email protected]</a>",password:"1234"}当用户按下提交按钮时

我试图在handleChange中创建一个const来将该值保存在其中，但我一次只能获取一个值。

this.state = {
  is_authenticated: false,
  application_status_modal_visible: false,
  login_data: []
};

handleChange = event => {
  const { login_data } = this.state;
  const { name, value } = event.target;
  const obj = { ...obj };
  obj[name] = value;
  console.log(obj);
  this.setState({ login_data: [...login_data, obj] });
};

handleSubmit = () => {
  console.log(this.state.login_data);
};

modalCancel = () => {
  this.setState({ application_status_modal_visible: false });
};

<Modal
  title="Login"
  visible={application_status_modal_visible}
  onOk={this.handleSubmit}
  onCancel={this.modalCancel}
>
  <Form>
    <FormItem>
      <Input
        prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
        placeholder="Email"
        name={"email"}
        onChange={this.handleChange}
      />
    </FormItem>
    <FormItem>
      <Input
        prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
        type="password"
        placeholder="Password"
        name={"password"}
        onChange={this.handleChange}
      />
    </FormItem>
  </Form>
</Modal>;
...

我期待这个结果 {email:"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a6b4a6b4a695b2b8b4bcb9fbb6bab8" rel="noreferrer noopener nofollow">[email protected]</a>",password:"121212"}

Answer 1

使用状态时，您必须使用不可变操作。对于嵌套对象，如果不使用自定义库，这可能会有点棘手。您还应该在更新状态之前避免访问 this.state。相反，使用更新函数:

handleChange = event => {
  const { name, value } = event.target;
  this.setState(prevState => {
    const { login_data } = prevState;
    return { // returning a change object
      login_data: {
        ...login_data,  // copy the original
        [name]: value // overwrite value
      }
    };
  });
};

另请注意，您应将 login_data 初始化为 {} 而不是 []。它是一个对象，而不是数组。

但是，理想的解决方案是根本不使用嵌套对象，除非您的状态变得更加复杂:

this.state = {
  is_authenticated: false,
  application_status_modal_visible: false
  email: "",
  password: ""
};

handleChange = event => {  
  const { name, value } = event.target;
  this.setState({
     [name]: value
  });
};

handleSubmit = () => {
  const { email, password } = this.state;
  const loginData = { email, password };
  console.log(loginData);
};