Как отправить ввод, скрытый в React JS?

Question

У меня есть эта форма, и я бы хотел отправить эти значения. Я знаю, что мы должны использовать setState() для хранения данных, но как это работает для input type="hidden"?

1. Первый вопрос: как хранить ввод, скрытый в setState?
2. Второй вопрос: как сериализовать данные, такие как form.serialize()?
3. Третий вопрос: как отправить эти значения сериализации? Аякс или Аксиос, кто лучше?

Вот код:

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

Ответ на этот вопрос является сложным для всех ваших вопросов.

Прежде всего, это зависит от задачи: если вы просто хотите отправить асинхронный запрос на сервер в форме submit, вам не нужно использовать состояние 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

Отвечая на ваши вопросы:

1. Поскольку вы знаете, как использовать состояние компоненты вы можете установить значение как: <input type='text' value={this.state.foo} /> или даже через реквизит проходящий <input type='hidden' value={this.props.foo} />

2. Вам не нужно сериализовать что-либо вообще. Используйте локальное состояние вашего компонента или даже контейнер состояния, например 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

3. AJAX представляет собой набор методов веб-разработки, а Вардар является основой JavaScript. Вы можете использовать jQuery, Axios или даже ванильный JavaScript.