如何处理React中按钮添加的输入

Question

在我的反应应用程序中，我有一个按钮，可添加div 2个输入。用户最多可以添加8个div。如何在不使用bind(this)的情况下处理输入更改？

class App extends Component {
  constructor() {
    super();
    this.state = {
      boxes: [],
    };
  }
  addBox = () => {
    const numberOfBoxes = this.state.boxes.length;
    const newBox = {
      name: '',
      score1: 0,
      score1: 0,
      index: numberOfBoxes + 1,
    };
    const arr = this.state.boxes.slice();
    arr.push(newBox);
    this.setState({
      boxes: arr,
    });
  }
  handleInput = (e) => {
  }
  render() {
    const boxes = this.state.boxes.map((e) => {
      return (
        <div key={e.index}>
          <span>name:{e.name}</span> <br></br>
          <span>score1: </span><input type="number" name="score1" onChange={this.handleInput(e.index)} value={e.score1} /><br></br>
          <span>score2: </span><input type="number" name="score2" onChange={this.handleInput(e.index)} value={e.score2} /> <br></br>
        </div>
      )
    })
    return (
      <div>
        <div>
          {boxes}
          <button onClick={this.addBox}>add</button>
        </div>
      </div>
    );
  }
}