为什么 select() 不能在 Safari 上使用 ReactJS 工作？
每当我单击/点击/聚焦该字段时，我想要一个 TextField 来选择该字段中当前的整个文本。以下代码适用于 Chrome (71.0.3578.98)，但不适用于 Safari (12.0.2)。有什么想法吗？
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<>
<h1>Test Focus React</h1>
<input
type="text"
defaultValue="test"
onFocus={event => {
event.target.select();
}}
/>
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
然而这个没有任何 React 的静态 HTML 文件在 Safari 上工作得很好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Test Focus JS</title>
</head>
<body>
<h1>Test Focus JS</h1>
<input type="text" value="test" onClick="this.select();" />
</body>
</html>
谁能帮我看看如何使用 React 让选择在 Safari 上工作？
当与 DOM 交互之类的事情失败时，通常与事件在不同上下文（react 与 onclick）中同步/异步触发的方式有关，甚至与浏览器（Safari 有时有奇怪的优化）有关。
我猜它只需使其异步即可工作，例如：
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<>
<h1>Test Focus React</h1>
<input
type="text"
defaultValue="test"
onFocus={event => {
// event properties must be copied to use async
const target = event.target;
setTimeout(() => target.select(), 0);
}}
/>
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
| 归档时间： |
|
| 查看次数： |
4408 次 |
| 最近记录： |