Javascript 我在登记表上的点击有问题吗

新的反应，所以我道歉，如果解决方案明显。使用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}
                />
              </div>
              <div className="form-group">
                <label htmlFor="this.state.lastName">Last Name</label>
                <input
                  placeholder="last Name"
                  type="text"
                  id="this.state. lastName"
                  className="form-control"
                  value={this.state.lastName}
                  onChange={this.handleChange}
                />
                <div className="form-group">
                  <label htmlFor="register-email">Email</label>
                  <input
                    placeholder="Enter Email"
                    type="text"
                    className="form-control"
                    id="register-email"
                    value={this.state.email}
                    onChange={this.handleChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="register-password">Password</label>
                <input
                  placeholder="Password"
                  type="password"
                  id="register-password"
                  `enter code here`className="form-control"
                  value={this.state.password}
                  onChange={this.handleChange}
                />
              </div>
              <div className="form-group">
                <label htmlFor="register-passwordConfirm">
                  Confirm Password
                </label>
                <input
                  placeholder="Confirm Password"
                  type="password"
                  id="register-passwordConfirm"
                  className="form-control"
                  value={this.state.passwordConfirm}
                  onChange={this.handleChange}
                />
              </div>
              <button onClick={this.onClickHandler} className="btn btn- 
              primary">
                Submit Form
              </button>

类表单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
有效载荷：{
名字：“，
姓氏：“，
电邮：“，
密码：“”，
密码确认：“
}
};
}
handleChange=事件=>{
让name=event.target.name；
让值=event.target.value；
这是我的国家({
[名称]：值，
[名称]：值，
[名称]：值，
[名称]：值，
[名称]：值
});
};
onClickHandler=evt=>{
evt.preventDefault（）；
让payload=this.state；
控制台日志（有效载荷）；
调试器；
注册服务
.寄存器（有效载荷）
.然后（这个.成功）
.catch（此.onActionError）；
};
onActionSuccess=响应=>{
控制台日志（响应）；
};
onActionError=errResponse=>{
console.log（errResponse）；
};
render（）{
返回(
注册用户
名字
姓
电子邮件
暗语
确认密码
提交表格

---

我希望在通过POST ajax调用单击submit时创建一个新的配置文件

您的

handleChange

函数应该是

      handleChange = event => {
      let { name, value } = event.target;

      this.setState({
            [name]: value,
      });
      };

您总是一次调用一次您的

handleChange

。每次您更改输入上的内容时，函数都会得到不同的

名称

和不同的

值

，这足以添加/更新您的状态

我注意到您还有

有效负载
对象处于状态

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,
            }
      });
      };

它成功了！非常感谢。你能给我解释一下“…this.state.payload”代表什么吗？特别是它的“…”部分。想了解更多，谢谢。请查看对象的
Javascript rest操作符
。这是新语法，但你也可以使用
object.assign（）
语法，如果您喜欢的话。请看这里，我非常感谢您的帮助。使用Object.assign，它会变成Object.assign（this.state.payload）[name]：value，
Object.assign（this.state.payload，{[name]：value}）
。您的
目标
和
源
都必须是
对象
。