Reactjs 使用React（2/redux表单）模拟将值粘贴到字段中

寻找一些我可以做什么来实现这一点的提示。基本上，我有一个按钮附近的快速输入输入。单击按钮时，需要模拟将值粘贴到用户光标所在的文本字段中。此外，如果有突出显示的内容，则应将其替换为输入的文本

---

我现在正在使用redux表单的更改操作来更新值，该操作可用于添加到末尾，但不会产生我想要的效果。

您在这里尝试实现的操作与默认情况下浏览器的行为背道而驰。单击按钮将导致输入失去焦点状态以及光标位置。当然，您可以通过重载组件状态来解决这个问题，但随着您添加更多的输入和逻辑，它可能会变得太难管理

为了便于讨论，我在这里发布了一个可能的解决方案，除非有很好的理由，否则我不会将其交付到生产中

您需要将输入值存储在state中，这就是它的作用，我在示例中使用的是纯组件状态。当焦点从输入移动到按钮（模糊事件）时，您将获得输入

selectionStart

和

selectionEnd

，并进行状态更新，将原始输入值中它们之间的内容替换为自定义值

正如我所说，向混合中添加多个输入将使问题复杂化，因为您需要将每个输入引用绑定到一个状态键

类MyForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
输入值：“”
}
}
render（）{
返回
this.input=e}
onBlur={this.onBlurInput}
onChange={this.onInputChange}
/>


this.button=e}
type=“按钮”
onClick={this.onAppend}
>
附加到游标
;
}
输入=（e）=>{
//`e.target`这里的输入是否模糊
const stringToInsert='Hello World'；
const{inputValue}=this.state；
const{selectionStart，selectionEnd}=e.target；
//我们点击了按钮，输入变得模糊了
if（e.relatedTarget==此按钮）{
const newInputValue=inputValue.substring（0，selectionStart）+
stringToInsert+
inputValue.substring（selectionEnd）；
这是我的国家({
inputValue:newInputValue
})
}
}
onAppend=（e）=>{
//重新聚焦输入
this.input.focus（）；
}
onInputChange=（e）=>{
这是我的国家({
输入值：e.target.value
});
}
}
ReactDOM.render（，document.getElementById（'root'））

使用中的状态功能redux@KARTHISRV不知道你的确切意思，州里有什么东西我可以用吗？或者，您建议将数据存储在状态中以确定这一点吗？您可以将数据存储在状态中吗？请详细说明论坛-@Troycosenti不确定您的实现是什么样子的，但您是否可以在这些输入上设置refs（functional）以及您是否可以访问JS中呈现的DOM节点？这很有意义，我不知道
selectedStart
和
selecteded
。将给你一个悬赏，一个问题-这是你将如何处理类似Slack的聊天框，它会猜到你在键入什么？不让我添加gif我的意思…你是说当你开始输入表情符号名称时显示的自动完成，比如：微笑。。。或者是用户名/频道名#fronten？没错！虽然现在我想这可能只适用于添加到endYep，但我认为Slack也可以这样做，但只有当你用鼠标选择东西时。他们也有事件监听器，用于键盘导航等输入。