如何將一個事件處理程序附加到React JS中的不同輸入？

Question

我是新來對付js的。

我在我的表單中有幾個輸入，並考慮React中的可控輸入方法，我試圖用一個事件處理程序來處理其他所有輸入。我在堆棧溢出中引用了一些引用，並介紹了這一點。仍然無法弄清楚爲什麼我無法在我的輸入框中寫入。

這是我的代碼。

import React, {Component} from 'react'; 
import { Grid, Row, Col , Button } from 'react-bootstrap'; 

class ContactForm extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name: '' , 
     email: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
     this.setState({[e.target.name]: e.target.value}) 
    } 

    render() { 
    return (
     <form> 
      <input name="input1" value={this.state.name} onChange={this.handleChange}/> 
      <input name="input2" value={this.state.email} onChange={this.handleChange} /> 
      <p>{this.state.name}, {this.state.email}</p> 
     </form> 
    ); 
    } 
} 


export default ContactForm; 

Answer 1

您使用的是name屬性識別輸入，但你正在閱讀的渲染功能，「名」和「電子郵件」，而不是「輸入1」和「輸入2」

錯誤值

你可以這樣做，而不是：

<input name="input1" value={this.state.input1} onChange={this.handleChange}/> 
<input name="input2" value={this.state.input2} onChange={this.handleChange} /> 

或

<input name="name" value={this.state.name} onChange={this.handleChange}/> 
<input name="email" value={this.state.email} onChange={this.handleChange} /> 

你也不得不CH ange這個：

this.state = { 
    name: '' , 
    email: '' 
}; 

如果你正在使用第一個選項的構造函數。

Answer 2

我會用裁判來實現這一目標：

handleChange(e) { 
     const {input1, input2} = this.refs; 
     //do what ever you want with the values 

    } 

    render() { 
    return (
     <form> 
      <input name="input1" value={this.state.name} ref="input1" /> 
      <input name="input2" value={this.state.email} ref="input2" onChange={this.handleChange} /> 
      <p>{this.state.name}, {this.state.email}</p> 
     </form> 
    ); 
    } 
} 

另外，我想對一個或兩個輸入端使用一個提交按鈕，或類似的東西，而不是一個事件監聽器