reactjs中的表单提交

Question

I have two fields in the form, but i am not able to post the data to the server. I know how to submit single filed but how do i submit multiple field in the form. below is the code of 2 fields

  class Createstudent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '',
 age:''
  };

    this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({name: event.target.value});
    this.setState({age:event.target.value});
  }

  handleSubmit(event) {
      alert(this.state.name);
    axios.post('/create',{values:this.state.name,ages:this.state.age})
    .then(function(response){
      console.log(response);
    })




  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.name} onChange={this.handleChange} />
        </label>
        <label>
          Age:
          <input type="text" value={this.state.age} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 1

Reason is you are updating both the fields with the same value, on change of any one, update the specific field, it will work, try this:

handleChange(event) {
    if(event.target.name == 'name')
        this.setState({name: event.target.value});
    else
        this.setState({age: event.target.value});
}

or

handleChange(event) {
   this.setState({[event.target.name]: event.target.value});
}

Add name attr to input field to identify them uniquely, Use this render method:

render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name='name' value={this.state.name} onChange={this.handleChange} />
        </label>
        <label>
          Age:
          <input type="text" name='age' value={this.state.age} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }

Check the jsfiddle : https://jsfiddle.net/dp0an79f/

Answer 2

I have changed the code like this.And its working.

  import React from 'react';
    import axios from 'axios';
    class Createstudent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {name: '',
     age:''
      };

      this.handleSubmit = this.handleSubmit.bind(this);
      }




      handleSubmit(event) {
          alert(this.state.name);
        axios.post('/create',{values:this.state.name,ages:this.state.age})
        .then(function(response){
          console.log(response);
        })




      }

      componentDidMount(){


      }

      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              Name:
              <input type="text" value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />
            </label>
            <label>
              Age:
              <input type="text" value={this.state.age} onChange={e => this.setState({ age: e.target.value })} />
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }