如何将一个事件处理程序附加到 React JS 中的不同输入？

我是反应 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;