在 React 中单击按钮时，如何在输入字段的任意位置直接插入文本？答案

【问题标题】：How to directly insert text anywhere in an input field when a button is clicked in React?在 React 中单击按钮时，如何在输入字段的任意位置直接插入文本？
【发布时间】：2019-10-19 02:17:36
【问题描述】：

假设我有一个输入字段：

<input type="text" value={this.state.title} />

现在它的值为例如“早上好！”。我想做的是能够在输入字段中的任何位置单击特定按钮时将一些预定义的文本插入输入字段。例如。当我单击 "[First Name]" / "[LastName]" 按钮时，输入字段的值可以变为，例如“早上好 [名字]”。

我可以在当前文本的末尾添加焦点输入，将其分配给状态，然后使用它来了解状态中要更改的键：

addCodeText(value) {
    const { currFocusedInput } = this.state;

    this.setState({
      [currFocusedInput]: `${
        this.state[currFocusedInput]
      } [${value}]`,
    });
  }

但是，正如我所提到的，这只会添加到文本的末尾。我希望能够直接插入到输入标签/元素中，而不是更改状态，以便我可以选择插入的位置（无论如何，输入元素是受控输入）。

我的意思是我可以将光标放在“早安”前面的输入字段中，然后单击按钮时的结果值将是例如“[名字]，早上好！”。在我当前的示例中，它总是附加在字符串值的末尾。

我该怎么做？

【问题讨论】：

您是否尝试过使用ref？
所以你的问题是如何处理字符串连接？
只需更改按钮单击时this.state.title 的值。这就是您的代码在输入中所说的内容。
我在上面编辑了我的描述，以表明我能够在输入字段中的任何位置插入的意思。

标签： javascript reactjs input

【解决方案1】：

@catandmouse 还有另一种方法。您不需要使用 Hooks。可以通过setState 方法使用组件的本地state 来完成。你可以玩下面的例子。

首先你在<input> 字段中得到字符串"A word"。点击按钮后会得到"A word with big sense"。

class FieldUpdate extends React.Component {
    constructor() {
        super();
        this.state = {
            title: 'A word',
        };
    }

    onChange(e) {
        this.setState({
            title: e.target.value
        });
    }

    updateText(text) {
        this.setState({
            title: `${this.state.title} ${text}`
        });
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.title} onChange={(e) => this.onChange(e)} />
                <button onClick={() => this.updateText('with big sense')}>Update text</button>
            </div>);
    }
}

React.render(<FieldUpdate />, document.getElementById('app'));

<head><script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
</head>
<body>
<div id="app"></app>
</body>

【讨论】：

是的，我已经能够做到这一点。但是，我希望能够在输入字段的任何位置插入“文本”。在前面，在结尾，在“A 字”之间。基本上，我当前光标在输入字段中的位置。
查看这篇文章：stackoverflow.com/questions/22410767/insert-at-cursor-in-react

【解决方案2】：

使用ref。像下面这样使用 React Hooks 的东西？

   function App(){
     const ref = useRef('');

     const [val,setVal] = useState('Good morning');

     function onClick() {
        ref.current.value = `${val} you!`;
     }

     return( 
         <div>
            <Button onClick={onClick}>Click</Button>
            <Input ref={ref} />
         </div>
     );
   }

【讨论】：