首次提交表单时为空值

Posted 2023-02-25

【中文标题】首次提交表单时为空值

【英文标题】：Empty value when form is submitted for the first time

【发布时间】：2018-12-29 10:51:47

【问题描述】：

我有以下代码，旨在将输入馈送到ToggleForm 组件（这是一个表单）并将其存储在employeeData 状态。但是，问题是每当我在执行后第一次按下ToggleForm 的提交按钮时，"" 值首先存储在employeeData 状态，并且只有在我第二次单击提交按钮之后表格中输入的数据会到达employeeData。

这一定是一个小错误。但我无法弄清楚。

import React from "react";
import ToggleForm from "./ToggleForm";
let employee = "";
class Home extends React.Component 
  constructor()
    super();
    this.state = 
        employeeData: ""
      ;
  

addEmployee(e) 
    e.preventDefault();
    let name = e.target.name.value;
    let address = e.target.address.value;
    let salary = e.target.salary.value;  
    this.setState(
        employeeData: [...this.state.employeeData,  name, address, salary ]
      );
    employee = [...this.state.employeeData];
    console.log(employee);
  

render() 
    return (
      <div className="container">
          <ToggleForm addEmployee=this.addEmployee.bind(this)/>
      </div>
    );
  


export default Home;

这里是ToggleForm 组件：

import React from 'react';

class ToggleForm extends React.Component 
    render()
        return(<div>
            <br/>
                <h3>Add a new employee</h3>
                <hr/>
                <form className="form-group" onSubmit = this.props.addEmployee>
                    <input className="form-control" type="text" name="name" placeholder="Name of the employee"/><br/>
                    <input className="form-control" type="text" name="address" placeholder="Address of the employee"/><br/>
                    <input className="form-control" type="text" name="salary" placeholder="Salary of the employee"/><br/>
                    <input type="submit" className="btn btn-primary"/>
                </form>
        </div>)
    


export default ToggleForm;

【问题讨论】：

我已经分享了@98​​7654331@ 组件。 :)

你在哪里实际使用/读取state.employeeData的值？

setState 是一个异步函数，因此当您访问状态时，它是旧状态。 setState 有第二个属性，即在状态更改后执行的回调。

react set state callback correct way to pass an argument的可能重复

【参考方案1】：

setState 是 async，幸运的是 accepts an optional callback。使用回调，您可以访问状态的最新值。

this.setState(
  employeeData: [...this.state.employeeData,  name, address, salary ]
, () =>  
  employee = [...this.state.employeeData];
);

【参考方案2】：

因为 setState 是异步的，所以当文本发生变化时，您需要在组件 Toggle 表单中设置 setState，然后再将其发送到父组件。

例如：

<input
onChange=this.handleChange
className="form-control"
type="text"
name="name"
value=this.state.name
placeholder="Name of the employee"
/>
<br />

函数handleChange：

 handleChange = (e) => 
    this.setState( [e.target.name]: e.target.value );
    console.log(e.target.value)
  ;

然后将其运送给父母：

 handleSubmit = e => 
    e.preventDefault();
    const  name, address, salary  = this.state;
    this.props.addEmployee( name, address, salary );
  ;

在这里查看我的代码：https://codesandbox.io/s/ww5331jrxl

【参考方案3】：

您的组件中几乎没有基本的更正： 用户超级（）；在 this.setState() 之前的构造函数中；

如果你没有使用 this.state.employeeData，那么不要在 state 中设置它。

如果您设置状态，那么您将在@Andy 描述的回调函数中获取employeeData，或者您可以使用以下内容：

employee = [...this.state.employeeData,  name, address, salary ]