score:5

Accepted answer

the answer is complex for all your questions.

first of all, it depends on the task: if you just want to send asynchonous request to server on form submit, you don't need to use component state. here is a link to the relevant section of the documentation. and use refs to access inputs data.

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

score:0

answering your questions:

  1. since you know how to use component's state you may set the value as : <input type='text' value={this.state.foo} /> or even via props passing <input type='hidden' value={this.props.foo} />

  2. you don't need to serialise anything at all. use your component's local state or even a state container like redux or flux in order to pick the appropriate data. take a look at this fairly simple example:

    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 is a set of web development techniques while axios is a javascript framework. you may use jquery, axios or even vanilla javascript.

score:1

all data can be stored on react's state, but if you still need to have inputs on your form you can do something like this:

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

see the demo below:

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>

if you know what the inputs that you need you can do something like this:

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>


Related Query

More Query from same tag