ドロップダウンからの値の取得と反応の入力

Question

すべての入力から値を取得しようとしています。私は入力から値を得ることができますが、selectタグをドロップすることはできません。

私は間違っていますか？

class App extends Component { 
    constructor(props){ 
    super(props) 

    this.state = { 
     contacts 
    }; 
    } 

    removeContact(id) { 
    const removedID = contact => contact.id !== id; 
    const updatedContacts = this.state.contacts.filter(removedID) 
    this.setState({contacts: updatedContacts}) 
    } 

    handleSubmit(e){ 
    e.preventDefault(e) 
    const target = e.target; 
    console.log(target.email.value) 
    console.log(target.gender.value) 

    } 


    render() { 
    return (
     <div className="App"> 
      <form onSubmit={this.handleSubmit}> 
      <div> 
       <label> 
       First Name: 
       <input type="text" value={this.state.first_name} name="first_name" /> 
       </label> 
      </div> 
      <div> 
       <label> 
       Last Name: 
       <input type="text" value={this.state.last_name} name="last_name" /> 
       </label> 
      </div> 
      <div> 
       <label> 
       Email: 
       <input type="text" value={this.state.email} name="email"/> 
       </label> 
      </div> 
      <div> 
       <select value={this.state.gender} onChange={this.handleSubmit}> 
        <option name="male"> Male</option> 
        <option name="female">Female</option> 
       </select> 
      </div> 
      <input type="submit" value="Submit" /> 
      </form> 

Answer 1

あなたは状態にselectのvalueを設定しますが、新しい値が選択されたときの状態を変更しないでください。

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { gender: "male" }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(e) { 
 
    this.setState({ gender: e.target.value }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <select value={this.state.gender} onChange={this.handleChange}> 
 
     <option name="male"> Male</option> 
 
     <option name="female">Female</option> 
 
     </select> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>