如何在 REACT 中的 Axios Post 请求中附加表单数据

Question

目前，如果我手动编码要发送的数据，我有以下功能可以正确地进行 POST

       constructor() {
        super()
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        const form = new FormData(event.target);

        axios({
            method: 'post',
            url: 'http://localhost:3003/register',
            data: qs.stringify({
              email: 'testing',   //as you can see I have handcoded the data, and it posts properly
              password: 'testing'
            }),
            headers: {
              'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
            }
          })


    }



    render() {
        return (
            <div className="content-landing">

                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="email">Enter email</label>
                    <input id="email" name="email" type="email" />

                    <label htmlFor="password">Enter password</label>
                    <input id="password" name="password" type="password" />


                    <button>Register</button>
                </form>

            </div>

        )
    }
}

但是我如何在 axios 中将表单中的数据提供给这个 post 请求？

axios({
                method: 'post',
                url: 'http://localhost:3003/register',
                data: qs.stringify({
                 form //referencing const form
                }),
                headers: {
                  'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                }
              })

我已经尝试使用上面的代码来获取带有表单数据的 const 表单，但它不会做任何事情。

所以我迷路了，因为我不知道如何用表单中的数据来提供请求。

Answer 1

好吧，您需要以响应方式执行此操作，即保持电子邮件和密码输入的值处于一种状态，并在需要时检索它们。 要将电子邮件值保持在状态，请在电子邮件和密码输入上添加 onChange 事件处理程序，如下所示：

<input id="email" name="email" type="email" onChange={this.handleChange} value={this.state.email} />
<input id="password" name="password" type="password" onChange={this.handleChange} value={this.state.password} />

用handleChange如下图：

handleChange = (evt)=> { // If you are using typescript, type evt like this evt: React.ChangeEvent<HTMLInputElement>
    const target = event.target;
    const value = target.value;
    const name = target.name;

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

handleChange 函数会将email 和password 保存在状态中。现在您可以像这样在需要时检索和使用它们：

const {email, password} = this.state;

哦，首先记得初始化email和password的值

我已更新您的代码，如下所示：

    class MyAwesomeComponent extends React.Component {
       constructor() {
          super()
          this.state = {
             email: "",
             password: ""
          }
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this)
       }

       handleChange = (evt)=> {
        const target = event.target;
        const value = target.value;
        const name = target.name;

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

       handleSubmit(event) {
        event.preventDefault();
        const form = new FormData(event.target);
        const {email, password} = this.state;

        axios({
            method: 'post',
            url: 'http://localhost:3003/register',
            data: qs.stringify({email,password}),
            headers: {
              'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
            }
          })
       }

       render() {
        return (
            <div className="content-landing">

                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="email">Enter email</label>
                    <input id="email" name="email" type="email" onChange={this.handleChange} value={this.state.email} />

                    <label htmlFor="password">Enter password</label>
                    <input id="password" name="password" type="password" onChange={this.handleChange} value={this.state.password} />


                    <button>Register</button>
                </form>

            </div>

        )
      }
    }

   export default MyAwesomeComponent

欲了解更多信息，请查看React.js documentation

Answer 2

更改此代码

  data: qs.stringify({
              email: event.target.email.value,
              password: event.target.password.value
            })