如何使用 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 为空，因为组件尚未重新渲染，并且输入字段尚未渲染（因此无法聚焦）。

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

有不同的方法吗？

原文由 Kris Selbekk 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议