从下拉菜单中获取数值和输入反应

Question

我试图从所有输入中获取值。我能够从输入中获取输入值，但不能从下拉选择标记中获得输入值。

我在做什么错？

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，但是当选择一个新的值不改变状态。您需要setState一旦值的变化，使它体现在DOM：

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>