如何在ReactJS中将获取到的URL插入文本区域？

核心逻辑基于React单向数据流规则，将模态框输入值和文本区域内容交由公共父组件状态托管，模态框提交时同步状态即可完成插入。

完整实现代码 #

import { useState } from 'react';

// 模态弹窗组件
const UrlInputModal = ({ isOpen, onClose, onConfirm }) => {
  const [inputUrl, setInputUrl] = useState('');

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h3>输入URL</h3>
        <input 
          type="url" 
          value={inputUrl} 
          onChange={(e) => setInputUrl(e.target.value)}
          placeholder="请输入链接地址"
        />
        <div className="modal-actions">
          <button onClick={onClose}>取消</button>
          <button onClick={() => {
            onConfirm(inputUrl);
            setInputUrl('');
            onClose();
          }}>确认</button>
        </div>
      </div>
    </div>
  )
}

// 父组件示例
const App = () => {
  const [textAreaValue, setTextAreaValue] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleInsertUrl = (url) => {
    // 模式1：直接将URL追加到文本末尾，不需要光标定位可以直接用这个
    // setTextAreaValue(prev => prev + url)

    // 模式2：将URL插入到文本区域当前光标位置
    const textarea = document.getElementById('target-textarea');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const newText = textAreaValue.substring(0, start) + url + textAreaValue.substring(end);
    setTextAreaValue(newText);
    // 插入完成后把光标移到URL末尾优化体验
    setTimeout(() => {
      textarea.selectionStart = textarea.selectionEnd = start + url.length;
    }, 0);
  }

  return (
    <div className="app">
      <button onClick={() => setIsModalOpen(true)}>打开URL输入弹窗</button>
      <br />
      <textarea
        id="target-textarea"
        value={textAreaValue}
        onChange={(e) => setTextAreaValue(e.target.value)}
        rows={8}
        cols={50}
        placeholder="输入文本内容..."
      />
      <UrlInputModal 
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onConfirm={handleInsertUrl}
      />
    </div>
  )
}

export default App;

关键说明 #

• 所有状态托管在父组件，不需要引入额外状态管理库，适配轻量级项目场景
• 两种插入模式可以根据业务需求自由切换，注释已经标注对应代码位置
• 光标定位逻辑中的setTimeout是为了适配React异步更新特性，避免光标设置失效

内容的提问来源于stack exchange，提问作者StarLord