javascript - Reactjs Concat 与上一个状态

Question

我有这个简单的 react 代码

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      textarea: 'Hello World! \n \nTry to press Shift enter after Hello \n \nShould be like this \nHello \nWorld! '
    };
  }
  onChange = (e) => {
    this.setState({ textarea: e.target.value })
  }
  handlePress = e => {
    if (e.keyCode === 13 && e.shiftKey) {
      e.preventDefault();
      this.setState(prevState => ({ textarea: prevState.textarea.concat('\n why here') }))
    } else if (e.keyCode === 13) {
      e.preventDefault();

    }
  }
  render() {
    return (
      <div>

        <textarea style={{ height: 200, width: 200 }} value={this.state.textarea} onKeyDown={this.handlePress} onChange={this.onChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('code'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='code'></div>

应该是这样的

任何人都可以帮助我，或者只是指导我正确地解决这个问题，即使我不知道如何解释它以进行研究

Answer 1

在您的这段代码中:

this.setState(prevState => ({ textarea: prevState.textarea.concat('\n why here') }))

您将先前的文本区域状态与一些字符串连接起来 - 在您的例子中是 "\n why here"。它将前一个字符串的末尾与后者的开头连接在一起 - 仅此而已。

如您所见，您的代码中没有游标的概念 - 您没有正确指定 "\n why here" 应该放在哪里。

请查看selectionStart(也许还有selectionEnd)以获得光标的位置。

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectionStart

然后，更改逻辑的连接部分以将字符串插入所需位置。