javascript - 使用 useEffect() 钩子(Hook)处理关键事件的正确方法是什么，另一方面触发本地状态更改？

Question

对 React Hooks 相当陌生，我遇到了这个问题。我有一个功能组件，当我按下回车键(键码= 13)时，它接受输入并将其发送到父组件。该组件看起来像这样。

const SearchTermBar = (props) => {
const {resetStateSearchTerm, handlePowerToggleParent} = props;
const [inputTerm, handleInputChange] = useState('');
const inputRef = useRef();

useEffect(() => {
    const keyPressEvent = (e) => {
        if (e.keyCode === 13) {
            resetStateSearchTerm(inputTerm);
            handleInputChange('');
            handlePowerToggleParent('search');
        }
    };

    inputRef.current.addEventListener('keydown', keyPressEvent);
    let parentInputRef = inputRef;

    return () => {
        console.log('remove event listener');
        parentInputRef.current.removeEventListener('keydown', keyPressEvent);
    }
}, [inputTerm, resetStateSearchTerm, handlePowerToggleParent]);

return (
    <div className='SearchTermBar'>
        <input
            type='text'
            placeholder='Enter search term here (Press return to confirm)'
            className='SearchTermBar__Input'
            value={inputTerm}
            onChange={(e) => handleInputChange(e.target.value)}
            ref={inputRef}
        />
    </div>
);

问题在于，每次 inputTerm 或 props 值发生变化时，都会注册和取消注册该事件。但我无法找出处理事件注册/删除的正确方法(理想情况下应该发生一次)我理解这是因为对 inputTerm 的依赖，但我想知道更好地解决这个问题。

Answer 1

您已经有了输入引用，您实际上不需要状态:

const NOP = () => {};
const DEFAULT_INPUT = "";

function SearchTermBar(props) {
  const { resetStateSearchTerm = NOP, handlePowerToggleParent = NOP } = props;
  const inputRef = useRef();

  useEffect(() => {
    const keyPressEvent = (e) => {
      if (e.keyCode === 13) {
        resetStateSearchTerm(inputRef.current.value);
        inputRef.current.value = DEFAULT_INPUT;
        handlePowerToggleParent("search");
      }
    };

    inputRef.current.addEventListener("keydown", keyPressEvent);
    let parentInputRef = inputRef;

    return () => {
      console.log("remove event listener");
      parentInputRef.current.removeEventListener("keydown", keyPressEvent);
    };
  }, [resetStateSearchTerm, handlePowerToggleParent]);

  return (
    <input
      type="text"
      placeholder="Enter search term here (Press return to confirm)"
      style={{ width: "50%" }}
      ref={inputRef}
    />
  );
}

无论哪种方式，如果您想保留状态，则应将其值复制到引用中以修复 useEffect 中的闭包。可以通过添加另一个 useEffect 来完成，这将更新提到的引用。