表單提交的反應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

回答

相關問題