如何在 MUI TextField 上使用 onDoubleClick？答案

【问题标题】：How to use onDoubleClick on MUI TextField?如何在 MUI TextField 上使用 onDoubleClick？
【发布时间】：2021-11-08 18:50:28
【问题描述】：

我想在用户双击输入字段时选择输入字段中的文本，我为此做了一个函数，

export const selectText = (
  event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement, MouseEvent>
): void => {
  event.currentTarget.select();
};

但是如何在 mui 文本字段上使用它，在 mui 文档中没有 onDoubleClick 的道具。我只是发送一个道具

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

我收到此错误，

（我试图通过双击而不是文本来选择数字。）

【问题讨论】：

双击时选择文本不是输入的默认行为吗？只需输入一些文本（在文档示例输入中）[mui.com/components/text-fields/#main-content]，双击它，文本将被选中
@Dmitriif 是，但它不适用于数字的输入类型，我试图通过双击选择数字。
它仍然可以在没有额外操作的情况下工作，我创建了一个demo with MUI TextField and native number input 来展示它
@Dmitriif 是的，谢谢，但是如果我单击数字，如果我单击输入字段上的其他位置，它将不会选择。如果你能帮助我，那就太好了。

标签： javascript reactjs typescript material-ui

【解决方案1】：

您可以在 inputProps 中将其附加到本机 input 元素（在 TextField 内呈现）。

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

【讨论】：

谢谢！它对我有用@ColdAtNight

【解决方案2】：

如果你想知道用户什么时候双击：

<TextField onDoubleClick={() => console.log('double click')} />

如果你只想双击而不用监听单击事件：

<TextField onClick={(e) => e.detail === 2 && console.log('double click only')} />

现场演示

【讨论】：