如何使用React Hooks将某些内容集中在下一次渲染上

Question

我在玩钩子，我正在尝试做以下事情：

import React, { useState, useRef } from 'react';
const EditableField = () => {
const [isEditing, setEditing] = useState(false);
const inputRef = useRef();
const toggleEditing = () => {
setEditing(!isEditing);
if (isEditing) {
inputRef.current.focus();
}
};
return (
<>
{isExpanded && <input ref={inputRef} />}
<button onClick={toggleEditing}>Edit</button>
</>
);
};

这将失败，因为current为null，因为组件还没有重新渲染，并且输入字段还没有渲染(因此还不能聚焦(。

做这件事的正确方法是什么？我可以使用React Hooks FAQ中提出的usePrevious钩子，但这似乎是一个痛苦的解决方法。

有别的办法吗？

Answer 1

当isEditing发生更改时，您可以使用useEffect挂钩在每次渲染后运行函数。在该功能中，您可以检查isEditing是否为true，并对输入进行聚焦。

示例

const { useState, useRef, useEffect } = React;
const EditableField = () => {
const [isEditing, setEditing] = useState(false);
const toggleEditing = () => {
setEditing(!isEditing);
};
const inputRef = useRef(null);
useEffect(() => {
if (isEditing) {
inputRef.current.focus();
}
}, [isEditing]);

return (
<div>
{isEditing && <input ref={inputRef} />}
<button onClick={toggleEditing}>Edit</button>
</div>
);
};
ReactDOM.render(<EditableField />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

我知道接受的答案涵盖了上面问题中请求的元素。

但需要注意的是，如果您使用的是功能组件，请使用React.forwardRef将引用传递给子组件。可能是对于以后提到这个问题的人来说绝对有用。

以一种更干净的方式，您可以编写接受ref的子组件，如下所示：

const InputField = React.forwardRef((props, ref) => {
return (
<div className={props.wrapperClassName}>
<input 
type={props.type}
placeholder={props.placeholder} 
className={props.className}
name={props.name}
id={props.id}
ref={ref}/>
</div>
)
})

Answer 3

或者只需使用此组件

import { FC, useEffect, useRef } from 'react'
export const FocusedInput: FC<JSX.IntrinsicElements['input']> = (props) => {
const inputRef = useRef<null | HTMLElement>(null)
useEffect(() => {
inputRef.current!.focus()
}, [])
return <input {...props} type="text" ref={inputRef as any} />
}