如何在MUI TextField上使用onDoubleClick？

Question

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

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}
/>

我得到了这个错误，

​

​

(我试图在双击时选择数字，而不是文本。)

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')} />

实时演示

​

​