资本化输入将光标移至最后

Question

资本化反应中输入标签的内容使光标移动到文本的末尾。
任何想法如何修复它或如何以其他方式避免此问题？

请检查codepen示例

class App extends Component {
  state = {
    inputValue: ''
  }
  handleInputchange = (e) => {
    this.setState({ inputValue: this.handleCapitalize(e.target.value) })
  }
  handleCapitalize = (str) => {
    return str.toUpperCase();
  }
  render() {
    return (
      <input onChange={this.handleInputchange} value={this.state.variableName} />
    );
  }
}

Answer 1

这是因为variableName 中的文本在键入后完全替换。您可以使用参考手动通过手动管理DOM选择，或者如果项目任务可以通过一些样式进行输入。

在Github上讨论了此问题。