强制 TextField 在焦点上选择全文

Question

每当我单击/点击/聚焦该字段时，我都希望获得一个 TextField 来选择当前在该字段中的整个文本。我自己在其他 React 应用程序中使用了一个执行 的onFocus处理程序来完成此操作event.target.select()，但这种方法似乎不适用于 Material-UI。使用 Material-UI TextFields，我可以看到选择简短地覆盖了全文，然后它返回到仅在文本末尾闪烁的光标。

知道如何进行这项工作吗？

Answer 1

使用以下代码对我来说很好用：

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";

function App() {
  return (
    <TextField
      defaultValue="test"
      onFocus={event => {
        event.target.select();
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果这对您的问题没有帮助，请分享重现您问题的代码。