如何在 MUI TextField 上使用 onDoubleClick？

Question

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

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

但是如何在 mui 文本字段上使用它，在 mui 文档中没有onDoubleClick道具。 II 简单地发送一个道具

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

我收到这个错误，

（我试图在双击而不是文本中选择数字。）

Answer 1

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

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

Answer 2

如果您想知道用户何时双击：

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

如果您只想双击而不必收听单击事件：

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

现场演示