反应 onChange 文本输入正在将光标移动到输入字段中的文本末尾答案

【问题标题】：React onChange text input is moving cursor to end of text in input field反应 onChange 文本输入正在将光标移动到输入字段中的文本末尾
【发布时间】：2020-09-21 21:34:34
【问题描述】：

当我从状态设置值并更改输入中的值时，我遇到了一个错误。

当您在输入中写入并尝试更正文本时，光标会移动到末尾。

这是我的元素

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

这是我的功能

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>

【问题讨论】：

nvm，知道了，如果我们尝试在两者之间进行修改，则会出现问题。

标签： javascript reactjs

【解决方案1】：

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

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

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

  &lt;input id="text-area" type="text" value="123"/&gt;

对于您的情况，如果您希望光标移动到字符串的开头，请设置.selectionStart = 0。如果你想让它回到原来的位置，用var tempstart = ...selectionStart保存值，然后在你做数据更改后恢复它，.selectionStart = tempstart。

来源：Developer.Mozilla.org: HTMLInputElement.setSelectionRange()

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：