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}
                />
              </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>

我希望在通过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,
            }
      });
      };

注册表格上的onClick出现问题

1 个答案: