reactjs中的表單提交

Question

我在表單中有兩個字段，但我無法將數據發布到服務器。 我知道如何提交單個字段，但如何在表單中提交多個字段。 下面是2個字段的代碼

  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

原因是您正在更新具有相同值的兩個fields ，在更改任何一個字段時，更新特定字段，它會起作用，試試這個：

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

或者

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

將name attr 添加到input字段以唯一標識它們，使用此render方法：

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

檢查jsfiddle ： https : jsfiddle

Answer 2

我已經改變了這樣的代碼。它的工作原理。

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