表单提交的反应JS

我在形式两个领域，但我不能够把数据上传到服务器。我知道如何提交单个字段，但我如何在表单中提交多个字段。下面是2场表单提交的反应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> 
    ); 
    } 
}

来源

2017-02-06 Abhilash Muttalli

有什么问题？ – luboskrnac

什么都我在名称字段中键入时相同的值也将出现在年龄字段我怎么到这儿来此 –

我觉得我做错了在多个领域的手柄改变事件的方法。 –

原因的代码要更新这两个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满足HOD：

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.net/dp0an79f/

来源

2017-02-06 04:53:50

现在名称字段没有取值，只有年龄字段正在采用。而且，如果只有一种情况起作用，那么他们就会遇到问题。所以我认为这是只提供 –

年龄如果其他的意思，如果你输入任何东西名称字段只有名称字段将得到更新，否则年龄字段，我想你忘了给输入字段添加名称值。 –

在这里，我将这两个字段并发送到服务器。 –

我已经改变了这样的代码this.And其工作。

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

来源

2017-02-06 06:07:34

表单提交的反应JS

回答

相关问题