在react中编辑字符串的中间位置始终位于末尾

constructor(props) {
  super(props);
  this.state = {
    text: "",
    cursorPosition: 0
  };
}

render() {
  const { text, cursorPosition } = this.state;
  const beforeCursor = text.slice(0, cursorPosition);
  const afterCursor = text.slice(cursorPosition);

  return (
    <div>
      <span>{beforeCursor}</span>
      <input
        type="text"
        value={afterCursor}
        onChange={this.handleInputChange}
      />
      <span>{afterCursor}</span>
    </div>
  );
}

handleInputChange(event) {
  const { value } = event.target;
  const cursorPosition = value.length;

  this.setState({
    text: value,
    cursorPosition: cursorPosition
  });
}