Question

我有这个表单，我想发送这些值。我知道我们必须使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>来存储数据，但它如何用于setState()？

第一个问题：如何将隐藏的输入存储到setState？
第二个问题：如何序列化像form.serialize（）？
第三个问题：如何发送这些序列化值？ Ajax或Axios，哪个更好？

以下是代码：

input type="hidden"

Answer 1

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

首先，它取决于任务：如果您只想在表单提交时向服务器发送异步请求，则不需要使用Component状态。以下是documentation相关部分的链接。并使用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 2

回答你的问题：

由于您知道如何使用组件的状态，因此您可以将值设置为：<input type='text' value={this.state.foo} />或甚至通过道具传递<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甚至是vanilla JavaScript。

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中的输入？

3 个答案: