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中提供此发布请求？

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

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

2 个答案: