我的 onClick 注册表有问题

Question

刚开始反应，所以如果解决方案很明显，我深表歉意。使用 ajax 提交应该创建一个新帐户的注册表单。我知道我应该使用 onChange 来收集提交的信息。在看到许多示例后，我仍然无法让我的代码工作。我知道 POST 的 ajax 调用是有效的，因为我自己在 vscode 上输入了信息来测试提交时它是否会创建它所做的。我在从 onChange 过渡到我的提交表单时遇到问题。希望这很清楚。谢谢我已经尝试为我的注册模板创建一个 onChange 函数。我无法得到我一直希望的结果class Form extends React.Component {     constructor(props) {    super(props);    this.state = {      payload: {        firstName: "",        lastName: "",        email: "",        password: "",        passwordConfirm: ""      }      };      }      handleChange = event => {      let name = event.target.name;      let value = event.target.value;      this.setState({      [name]: value,      [name]: value,      [name]: value,      [name]: value,      [name]: value      });      };    onClickHandler = evt => {    evt.preventDefault();    let payload = this.state;    console.log(payload);    debugger;    registerService      .register(payload)      .then(this.onActionSuccess)      .catch(this.onActionError);   };   onActionSuccess = response => {    console.log(response);   };    onActionError = errResponse => {    console.log(errResponse);    };    <!-- -->    render() {    return (      <main role="main">        <div className="container">          <h1 id="title" align="center">            Register User          </h1>        </div>        <div className="container">          <div className="col-sm-4 col-sm offset-4">            <form className="form">              <div className="form-group">                <label htmlFor="this.state.firstName">First Name</label>                <input                  placeholder="First Name"                  type="text"                  id="this.state.firstName"                  className="form-control"                  name="firstName"                  value={this.state.firstName}                  onChange={this.handleChange}                />我希望在通过 POST ajax 调用单击提交时创建一个新的配置文件

Answer 1

你的handleChange功能应该是

      handleChange = event => {

      let { name, value } = event.target;

      this.setState({

            [name]: value,

      });

      };

你总是handleChange一次打电话给你。每次更改输入时，函数都会变得不同name和不同value，这足以添加/更新您的状态。

我注意到你也有payload对象处于状态。修改状态如

this.state = {

   firstname: '',

   ....

}

如果你真的想使用像

 this.state = {

        payload: {

           firstName: '',

           ....

           }

       };

你的onChange功能应该是这样的，

      handleChange = event => {

      let { name, value } = event.target;

      this.setState({

            payload: {

               ...this.state.payload, // don't forget to copy all the other values

               [name]: value,

            }

      });

      };