Question

我有这个简单的反应代码

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

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

Answer 2

您可以使用selectionStart值来获取光标位置并在该位置处断开文本，并在附加.slice之后使用\n方法将值设置回状态； </ >

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 => {
    e.persist();
    if (e.keyCode === 13 && e.shiftKey) {
      e.preventDefault();
      const pos = e.target.selectionStart;
      console.log(this.state.textarea)
      this.setState(prevState => ({ textarea: prevState.textarea.slice(0, pos) + " \n " + prevState.textarea.slice(pos) }))
    } 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>

具有上一个状态的Reactjs Concat

2 个答案: