javascript - 在 react 中编辑字符串的中间总是到最后

Question

我的 reactJS 应用程序中有一个 material-ui 输入。一切安好。但是当我尝试编辑(添加或修改)字符串中间的文本时，光标总是在我输入的每个字母后移动到字符串的末尾。

我假设这是因为每次输入更改后都会重新渲染组件因此，如果我不输入 value 属性，它将起作用。但我确实想以 react 方式编写它...

有什么建议吗？

<input value={this.props.value} onChange={this.props.onChange}/>

Answer 1

我推荐使用 controlled inputs .这将解决跳跃光标问题，并且是 React 方式。

跳动是重新渲染造成的。我假设 this.props.onChange 更新父组件的状态并将其传递给该组件？最好在同一个组件中维护输入的状态并从那里调用父机会函数。