How to handle inputs added by button in React

Question

in my react app i have a button which add div with 2 inputs. User can add up to 8 divs. How can i handle changes with inputs without using 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>
    );
  }
}