我正在玩钩子,我正在尝试执行以下操作:
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,因为组件还没有重新渲染,并且输入字段还没有渲染(因此还不能被聚焦)。
这样做的正确方法是什么?我可以使用usePrevious
React Hooks FAQ 中提出的钩子,但这似乎是一个痛苦的解决方法。
有不同的方法吗?