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

Question

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

第一个问题：如何将隐藏的输入存储到setState？
第二个问题：如何序列化像form.serialize()这样的数据？
第三个问题：如何发送这些序列化值？ 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

回答您的问题：

因为您知道如何使用组件的状态，您可以将值设置为：<input type='text' value={this.state.foo} /> 甚至通过 props 传递 <input type='hidden' value={this.props.foo} />

您根本不需要序列化任何内容。使用组件的本地状态，甚至像 Redux 或 Flux 这样的状态容器来选择合适的数据。看看这个相当简单的例子：

var SuperForm = React.createClass({
getInitialState() {
  return { 
    name: 'foo', 
    email: 'baz@example.com'
  };
},

submit(e){
  e.preventDefault();
  console.log("send via AJAX", this.state)
},

change(e,key){
  const newState = {};
  newState[key] = e.currentTarget.value;
  this.setState(newState)
},

render: function() {
    return (
    <div>
      <label>Name</label>
      <input 
        onChange={(e) => this.change(e,'name')}
        type="text" 
        value={this.state.name} />
      <label>Email</label>  
      <input 
        onChange={(e) => this.change(e,'email')}
        type="text" 
        value={this.state.email} />
      <button onClick={this.submit}>Submit</button>
    </div>
  );
}});

Demo

AJAX是一套web开发技术，而Axios是一个JavaScript框架。您可以使用 jQuery、Axios 甚至香草 JavaScript.

Answer 2

你所有问题的答案都很复杂。

首先，这取决于任务：如果您只想在表单提交时向服务器发送异步请求，则不需要使用 Component 状态。这是 link 到 documentation. And use refs 的相关部分以访问输入数据。

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

Answer 3

所有数据都可以存储在 React 的状态中，但是如果您仍然需要在表单上输入，您可以这样做：

const handleSubmit = e => {
     e.preventDefault();
     const inputs = Object.values(e.target)
        .filter(c => typeof c.tagName === 'string' && c.tagName.toLowerCase() === 'input')
        .reduce((acc, curr) => ({ ...acc, [curr.name]: curr.value }), {});

     setFormVals({ ...formVals, ...inputs });
}

查看下面的演示：

const Demo = () => {
    const [formValues] = React.useState({});

    const handleSubmit = e => {
        e.preventDefault();
        const inputs = Object.values(e.target)
            .filter(c => typeof c.tagName === 'string' && c.tagName.toLowerCase() === 'input')
            .reduce((acc, curr) => ({ ...acc, [curr.name]: curr.value }), {});

        console.log(inputs);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="name" placeholder="Name" value={formValues.name} />
            <input name="email" placeholder="Email" value={formValues.email} />
            <input name="hiddenInput" value="hiddenValue" type="hidden" />
            <button type="submit">Submit</button>
        </form>
    );
}

ReactDOM.render(<Demo />, document.getElementById('demo'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

如果你知道你需要什么输入，你可以这样做：

const Demo = () => {
    const formRef = React.useRef(null);
    const [formValues, setFormValues] = React.useState({});
    
    const handleChange = e => {
      setFormValues({
        ...formValues,
        [e.target.name]: e.target.value,
      });
    }
    
    const handleSubmit = e => {
      e.preventDefault();
      setFormValues({ ...formValues, hiddenInput: formRef.current.hiddenInput.value });
    }
    
    return (
        <form onSubmit={handleSubmit} ref={formRef}>
            <input name="name" placeholder="Name" value={formValues.name} onChange={handleChange} />
            <input name="email" placeholder="Email" value={formValues.email} onChange={handleChange} />
            <input name="hiddenInput" value="hiddenValue" type="hidden" />
            <button type="submit">Submit</button>
            <pre>{JSON.stringify(formValues, null, 2)}</pre>
        </form>
    );
}

ReactDOM.render(<Demo />, document.getElementById('demo'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

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

How to send input hidden in React JS?

ajax

reactjs

react-jsx