Javascript 将JS Concat与上一个状态进行反应

我有一个简单的代码

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
textarea:“Hello World！\n\n在Hello之后尝试按Shift-enter键\n\n应该是这样的\n Hello\n World！”
};
}
onChange=（e）=>{
this.setState（{textarea:e.target.value}）
}
手柄压力=e=>{
if（e.keyCode==13&&e.shiftKey）{
e、 预防默认值（）；
this.setState（prevState=>（{textarea:prevState.textarea.concat（'\n why here'）}））
}否则如果（e.keyCode===13）{
e、 预防默认值（）；
}
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'code'））
在此代码片段中：

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

您可以使用一些字符串连接上一个textarea状态-在您的情况下，
“\n为什么在这里”
。它将前一个字符串的末尾与后一个字符串的开头连接起来——不多也不少

如您所见，代码中没有光标的概念-您没有正确指定
“\n为什么在这里”
应该放在哪里

请查看
selectionStart
（可能还有
selectionEnd
）以获取光标的位置


然后，更改逻辑的concat部分，将字符串插入到所需位置。
您可以使用
选择Start
值获取光标位置并在该位置断开文本，然后使用
.slice
方法将值设置回追加
\n
后的状态


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
textarea:“Hello World！\n\n在Hello之后尝试按Shift-enter键\n\n应该是这样的\n Hello\n World！”
};
}
onChange=（e）=>{
this.setState（{textarea:e.target.value}）
}
手柄压力=e=>{
e、 坚持（）；
if（e.keyCode==13&&e.shiftKey）{
e、 预防默认值（）；
const pos=e.target.selectionStart；
console.log（this.state.textarea）
this.setState（prevState=>（{textarea:prevState.textarea.slice（0，pos）+“\n”+prevState.textarea.slice（pos）}））
}否则如果（e.keyCode===13）{
e、 预防默认值（）；
}
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'code'））