如何发送隐藏在React JS中的输入？

Question

我有此表格，我想发送这些值。我知道我们必须用来setState()存储数据，但是它如何工作input type="hidden"？

1. 第一个问题：如何存储对setState隐藏的输入？
2. 第二个问题：如何序列化form.serialize（）这样的数据？
3. 第三个问题：如何发送这些序列化值？Ajax还是Axios，谁更好？

这是代码：

handleSubmit(e) {
    e.preventDefault();

   /**
    $.ajax({
        url: "post.php",
        type: "POST",
        data: DATA,
        success:function(data) {

        }
    });
    **/
 }

            <form onSubmit={this.handleSubmit}>
                        <input type="hidden" name="action" value="login" />
                        <input type="email" name="email_user" placeholder="Email" />
                        <input type="password" name="password_user" placeholder="Mot de passe" />
                        <button type="submit">Login</button>
            </form>

Answer 1

对于所有问题，答案都很复杂。

首先，这取决于任务：如果只想在表单提交时向服务器发送异步请求，则不需要使用Component状态。这是文档相关部分的链接。并使用引用来访问输入数据。

class FormComponent extends React.Component {

    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(e) {
        e.preventDefault();

        // Send your ajax query via jQuery or Axios (I prefer Axios)
        axios.get('your_url', {
            params: {
              action: this.actionInput.value,
              email: this.emailInput.value,
              password: this.passwordInput.value,
            }
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

    }

    render() {
        return (
            <form onSubmit={this.onSubmit}>
                <input type="hidden" name="action" value="login" 
                       ref={(input) => { this.actionInput = input }} />

                <input type="email" name="email_user" placeholder="Email" 
                       ref={(input) => { this.emailInput = input }}/>

                <input type="password" name="password_user" placeholder="Mot de passe" 
                       ref={(input) => { this.passwordInput = input }}/>

                <button type="submit">Login</button>
            </form>
        );
    }
}