React onChange 文本输入正在将 cursor 移动到输入字段中的文本末尾

Question

当我设置 state 的值并更改输入中的值时出现错误。

当您在输入中写入并尝试更正文本时，cursor 移至末尾。

这是我的元素

<div className="campo">
  <p>Nombre</p>
  <div className="campo-input">
    <input
     type="text"
     name="name"
     value={this.state.name}
     onChange={this.handleInputChangeUpperCase}
     />
  </div>
</div>

这是我的 function

handleInputChangeUpperCase = (e) => {
    let { name, value } = e.target;
    this.setState({ [name]: value.toUpperCase() });
  };

工作片段：

 class App extends React.Component { state = { name: "Ronaldo", }; // This is the function handleInputChangeUpperCase = (e) => { let { name, value } = e.target; this.setState({ [name]: value.toUpperCase(), }); }; render() { // This is the Element return ( <div className="campo"> <p> Nombre </p> <div className="campo-input"> <input type="text" name="name" value={this.state.name} onChange={this.handleInputChangeUpperCase} /> {this.state.name} </div> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 1

要控制 cursor 在输入字段中的位置，请使用selectionStart ，它指示所选文本的开始位置。 只要您不设置selectionEnd ，您只需将 cursor 移动到所需的 position。

例如，让我们移动到 position“1”，就在第一个字符之后。 对于输入“123”，应该是“1|23”...

 document.getElementById('text-area').selectionStart = 1; document.getElementById('text-area').focus()

 <input id="text-area" type="text" value="123"/>

对于您的情况，如果您希望 cursor 移动到字符串的开头，请设置.selectionStart = 0 。 如果您希望它 go 回到原来的位置，请使用var tempstart =...selectionStart保存该值，然后在进行数据更改后将其恢复， .selectionStart = tempstart 。

资料来源： Developer.Mozilla.org：HTMLInputElement.setSelectionRange()

Answer 2

基于原始答案： https://stackoverflow.com/a/49648061/7427111

 class App extends React.Component { state = { name: "Ronaldo", }; handleInputChangeUpperCase = (e) => { // Here is the addition const pointer = e.target.selectionStart; const element = e.target; window.requestAnimationFrame(() => { element.selectionStart = pointer; element.selectionEnd = pointer; }); let { name, value } = e.target; this.setState({ [name]: value.toUpperCase(), }); }; render() { return ( <div className="campo"> <p> Nombre </p> <div className="campo-input"> <input type="text" name="name" value={this.state.name} onChange={this.handleInputChangeUpperCase} /> {this.state.name} </div> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 3

如果您只需要toUpperCase作为格式，则可以改用 css。 似乎这里描述了最简单的解决方案https://stackoverflow.com/a/3724990/12868043

Answer 4

这种行为似乎发生在.toUpperCase()上；

handleInputChangeUpperCase = e => {    
    this.setState({ [e.target.name]: e.target.value });
};

如果您不要求文本在输入时立即变为大写，我会在setState之外应用该方法