我的 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功能应该是&nbsp; &nbsp; &nbsp; handleChange = event => {&nbsp; &nbsp; &nbsp; let { name, value } = event.target;&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [name]: value,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; };你总是handleChange一次打电话给你。每次更改输入时，函数都会变得不同name和不同value，这足以添加/更新您的状态。我注意到你也有payload对象处于状态。修改状态如this.state = {&nbsp; &nbsp;firstname: '',&nbsp; &nbsp;....}如果你真的想使用像&nbsp;this.state = {&nbsp; &nbsp; &nbsp; &nbsp; payload: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;firstName: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;};你的onChange功能应该是这样的，&nbsp; &nbsp; &nbsp; handleChange = event => {&nbsp; &nbsp; &nbsp; let { name, value } = event.target;&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; payload: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...this.state.payload, // don't forget to copy all the other values&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[name]: value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; };