如何在MUI TextField组件上使用onDoubleClick实现双击选中内容？

问题根因 #

MUI 的 TextField 是封装了多层结构的复合组件，原生DOM事件属性没有直接作为顶层props暴露，直接给TextField传onDoubleClick会被识别为无效属性，触发TS类型报错。

基础解决方案 #

你需要通过inputProps参数将双击事件传递给内部的原生input/textarea元素，写法如下：

<TextField
  id={id}
  name={name}
  value={value}
  inputProps={{
    onDoubleClick: selectText
  }}
/>

这个写法对单行输入、多行（multiline）输入场景都生效。

适配「仅选中数字内容」需求的改造方案 #

如果需要双击时只选中文本内的数字部分，可以调整你的事件处理函数：

export const selectText = (
  event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>
): void => {
  const target = event.currentTarget;
  const content = target.value;
  // 匹配整数、小数格式的数字
  const numberReg = /\d+\.?\d*/;
  const matchResult = content.match(numberReg);
  
  if (matchResult) {
    // 定位数字的起止位置，选中对应区间
    const start = matchResult.index!;
    const end = start + matchResult[0].length;
    target.setSelectionRange(start, end);
    return;
  }
  // 无匹配数字时降级为选中全部内容
  target.select();
};

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