React onChange文本输入将光标移动到输入字段中的文本末尾

Question

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

当你输入并试图更正文本时，光标会移动到末尾。

这是我的元素

<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>

Answer 1

基于原始答案：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 2

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

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

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

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

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

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

Answer 3

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

Answer 4

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

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

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