专注于输入中的最后一个符号，但不在可见区域中

Question

要查看您需要在输入中键入" atw"的问题。

问题是，当我按Enter和更改输入值=>粘贴字符串的最后一个符号不在输入的可见区域，直到我继续键入。

输入中的粘贴字符串是"所有网络，周末，周末一直在网络上"。

现在我看到https://ibb.co/c5kvcgk，但我期望https://ibb.co/6jd3rrq

如何解决它？

我使用此代码创建沙箱进行尝试。https://codepen.io/anon/pen/exadey?editors=1010

class Input extends React.Component {
  state = {
    value: '',
    changeValue: ''
  }
  handleChange = (e) => {
    this.setState({
      value: e.target.value,
      changeValue: e.target.value === 'ATW' 
        ? 'All The Web, Around The Web, All The Way, At The Weekend'
        : ''
    });
  }
  handleKeyDown = (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      if (this.state.changeValue) {
        return this.setState({
          value: this.state.value.replace(
              this.state.value,
              this.state.changeValue
            ),
          changeValue: ''
        })   
      }
    }
  }
  render() {
    return (
      <React.Fragment>
        <p></p>
        <input
          type="text"
          placeholder="Type ATW"
          ref={input => this.messageInput = input}
          value={this.state.value}
          onKeyDown={this.handleKeyDown}
          onChange={this.handleChange} />
        {this.state.changeValue && 
          <span>Press Enter to confirm changes: "{this.state.changeValue}"</span>
        }
      </React.Fragment>
    );
  }
}
ReactDOM.render(
  <Input />,
  document.getElementById('app')
);

Answer 1

也许您必须查看此功能

事实是光标已重置为输入中的初始位置...您必须将其置于

Answer 2

hack是使用

this.messageInput.blur();
this.messageInput.focus();

在setState回调函数中的handlekeydown中。

这有效，但也许有人有更好的解决方案。