[Textarea] 不支持原生的点击事件，自身也没有点击事件，想获取selection没有办法获取

[C1rq]

tdesign-react 版本

能

重现链接

No response

重现步骤

No response

期望结果

希望能继承原生的点击事件

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions[bot]]

👋 @C1rq，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[RylanBot]

因为组件库的 <Textarea /> 组件内部原生的 <textarea /> 外部还封装了一层 div 所以估计是你绑定 ref 的时候获取的元素不太对，导致事件没生效，是我们的文档没写清楚

你可以参考下面的写法，能正常触发 onSelect 与 onClick 核心是：const textarea = textareaRef.current.textareaElement;

import React, { useRef, useState } from 'react';
import { Textarea } from 'tdesign-react';

const Index = () => {
  const textareaRef = useRef(null);
  const nativeTextareaRef = useRef(null);

  const [selectedText, setSelectedText] = useState('');
  const [cursorPosition, setCursorPosition] = useState(0);
  const [nativeSelectedText, setNativeSelectedText] = useState('');
  const [nativeCursorPosition, setNativeCursorPosition] = useState(0);

  const handleSelect = () => {
    const textarea = textareaRef.current.textareaElement;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selected = textarea.value.substring(start, end);
    setSelectedText(selected);
    setCursorPosition(start);
  };

  const handleClick = () => {
    const textarea = textareaRef.current.textareaElement;
    setCursorPosition(textarea.selectionStart);
    if (textarea.selectionStart === textarea.selectionEnd) {
      setSelectedText('');
    }
  };

  const handleNativeSelect = () => {
    const textarea = nativeTextareaRef.current;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selected = textarea.value.substring(start, end);
    setNativeSelectedText(selected);
    setNativeCursorPosition(start);
  };

  const handleNativeClick = () => {
    const textarea = nativeTextareaRef.current;
    setNativeCursorPosition(textarea.selectionStart);
    if (textarea.selectionStart === textarea.selectionEnd) {
      setNativeSelectedText('');
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
      <div>
        <Textarea
          ref={textareaRef}
          onSelect={handleSelect}
          onClick={handleClick}
          placeholder="（TDesign）输入文本，选择或点击查看位置信息"
        />
        <div style={{ marginTop: '5px', backgroundColor: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
          <p>
            <strong>Selected Text:</strong> {selectedText || '未选中文本'}
          </p>
          <p>
            <strong>Cursor Position:</strong> {cursorPosition}
          </p>
        </div>
      </div>

      <div>
        <textarea
          ref={nativeTextareaRef}
          onSelect={handleNativeSelect}
          onClick={handleNativeClick}
          placeholder="（原生）输入文本，选择或点击查看位置信息"
          style={{
            minHeight: '45px',
            width: '100%',
          }}
        />
        <div style={{ marginTop: '5px', backgroundColor: '#f0f8ff', padding: '10px', borderRadius: '4px' }}>
          <p>
            <strong>Selected Text:</strong> {nativeSelectedText || '未选中文本'}
          </p>
          <p>
            <strong>Cursor Position:</strong> {nativeCursorPosition}
          </p>
        </div>
      </div>
    </div>
  );
};

export default Index;