如何在REACT中的Axios Post请求中附加表单数据 [英] How to append form data in an Axios Post request in REACT

问题描述

当前，我具有以下功能，如果我手动编码要发送的数据，则可以正确执行POST

Currently I have the following functions which makes the POST properly if i handcode the data to send

       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中提供此发帖请求?

But how do i feed this post request in axios with the data from the form?

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表单，但是它不会做任何事情.

I have tried the above code to get the const form with the form data, but it wont do anything.

我迷路了，因为我不知道如何用表单中的数据来满足请求.

So im lost there since I dont know how to feed the request with the data within the form.

推荐答案

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

Well, you need to do this the react way, which is keeping the value of the email and password inputs in a state and retrieving them whenever you need them. To keep the email value in a state, add an onChange event handler on the email and password inputs like this:

<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的状态.现在，您可以像这样检索它们并在需要时使用它们:

The handleChange function will save both email and password in the state. Now you can retrieve them and use whenever you need them like this:

const {email, password} = this.state;

哦，首先要记住初始化email和password

Oh first remember to initialize the values for both email and password

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

I have updated your code as shown below:

    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文档

For more information, check out the React.js documentation

这篇关于如何在REACT中的Axios Post请求中附加表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！