Javascript react js中的表单提交

表单中有两个字段，但无法将数据发布到服务器。我知道如何提交单个字段，但如何在表单中提交多个字段。 下面是两个字段的代码

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

类Createstudent扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={name:''，
年龄：''
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{name:event.target.value}）；
this.setState（{age:event.target.value}）；
}
handleSubmit（事件）{
警报（this.state.name）；
post（'/create'，{values:this.state.name，ages:this.state.age}）
.然后（功能（响应）{
控制台日志（响应）；
})
}
render（）{
返回(
姓名：
年龄：
);
}
}

原因是您正在用相同的值更新两个

字段

，在任何一个字段发生更改时，更新特定字段，它将起作用，请尝试以下操作：

handleChange(event) {
    if(event.target.name == 'name')
        this.setState({name: event.target.value});
    else
        this.setState({age: 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>
    );
  }

render（）{
返回(
姓名：
年龄：
);
}

---

检查

jsfiddle

：

我已经像这样更改了代码。它正在工作

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

从“React”导入React；
从“axios”导入axios；
类Createstudent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:''，
年龄：''
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
警报（this.state.name）；
post（'/create'，{values:this.state.name，ages:this.state.age}）
.然后（功能（响应）{
控制台日志（响应）；
})
}
componentDidMount（）{
}
render（）{
返回(
姓名：
this.setState（{name:e.target.value}）}/>
年龄：
this.setState（{age:e.target.value}）}/>
);
}
}

问题出在哪里？无论我在“名称”字段中键入什么，相同的值也会出现在“年龄”字段中。我该如何克服这个问题？我认为我在多个字段的“句柄更改事件”方法中做错了。@AbhilashMuttalli将唯一的

名称

属性添加到表单元素中。现在，名称字段不接受该值，唯一的年龄领域是采取。你也给出了if和else是一个问题，因为只有一个条件有效。因此，我认为它只需要使用年龄文件的含义是，如果在名称字段中输入任何内容，则只会更新名称字段，否则年龄字段，我认为您忘记了在输入字段中添加名称值。这里，我将使用两个字段并将其发送到服务器。但在发送之前，您需要接受用户的输入，一旦用户提供了这两个值，那么只有您将这些值发送到服务器。如果在两个字段中更新相同的值，则如果用户输入name，年龄也将更新，反之亦然。

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