相关疑难解决方法(0)

我正在玩钩子,我正在尝试做以下事情:

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,因为组件尚未重新渲染,并且输入字段尚未渲染(因此尚未聚焦).

这样做的正确方法是什么？我可以使用usePreviousReact Hooks FAQ中提出的钩子,但这似乎是一个痛苦的解决方法.

有不同的方式吗？