reactjs - React autoFocus 属性未呈现

Question

我正在尝试渲染 <input>字段与 autofocus :

<input type="text" autoComplete="off" autoFocus={true} className="form-control" />

但它被渲染为:

<input type="text" autocomplete="off" class="form-control">

并且输入不聚焦。

这是为什么？ 我如何获得 autofocus要渲染的属性？

Answer 1

这是意料之中的，实际上。 React 会手动调用 focus()在相关元素上，但不会添加属性本身。
这是来自 ticket response 的 Dan Abramov 的引述。大约 2 年前:

This is intentional because it works very differently in different browsers. So instead of actually setting a DOM attribute, we polyfill its behavior in JavaScript.

另外，来自另一个 thread :

Chrome respects dynamically added elements with autoFocus if there hasn’t been one before. Even creating an input with autoFocus, adding it to the document, and removing it in the next tick is enough to disable autofocusing of any elements added in the future in Chrome.

Firefox just doesn’t care about any dynamically added elements with autoFocus at all.

And Safari always respects them.

话虽如此，您仍然可以使用 autofocus="true" 强制该属性。而不是 autoFocus={true}但它实际上可能无法以可靠的方式工作。毕竟，React 团队对此进行 polyfill 是有原因的。
换句话说，如果您想要可靠、一致的跨浏览器行为，请使用 autoFocus , 如果你必须有 native 属性，你可以使用 autofocus="true" ，但要知道，您将受制于让浏览器决定何时以及如何聚焦所述元素。