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

Question

假设我有一个输入字段：

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

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

我可以通过获取焦点输入，将其分配给状态，然后使用它来知道要更改状态中的哪个键，从而在当前文本的末尾添加：

addCodeText(value) {

    const { currFocusedInput } = this.state;

    this.setState({

      [currFocusedInput]: `${

        this.state[currFocusedInput]

      } [${value}]`,

    });

  }

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

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

我该怎么做？

Answer 1

使用一个ref. 使用 React Hooks 的类似以下内容？&nbsp; &nbsp;function App(){&nbsp; &nbsp; &nbsp;const ref = useRef('');&nbsp; &nbsp; &nbsp;const [val,setVal] = useState('Good morning');&nbsp; &nbsp; &nbsp;function onClick() {&nbsp; &nbsp; &nbsp; &nbsp; ref.current.value = `${val} you!`;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;return(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button onClick={onClick}>Click</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Input ref={ref} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;);&nbsp; &nbsp;}