按下父按钮后未清除受控钩子输入

Question

我在标题组件中有一个搜索栏，如下图所示。单击搜索图标后，将出现搜索栏，您可以开始搜索。这里的想法是，再次单击该图标，应将搜索栏中的文本重置为空状态。按下标题组件中的图标后，将触发cleanSearch useEffect。在两个console.logs中，我们发现输入的状态设置为''。但是，我目前遇到的问题是，再次显示搜索栏后，旧值仍然存在于其中。似乎只有清除状态在这里不起作用。我还尝试给<StyledSearch>一个value={input.value}，并尝试了不同的方式来设置和清除状态。这里出了什么问题？

edit：我在此沙箱中重新创建了问题

https://codesandbox.io/s/adoring-mahavira-o1hyu

SearchBar组件中的受控输入

/** Search bar in header */
const SearchBar = props => {
  const { isActive, cleanSearch } = props;
  const [input, setInput] = useState({});

  useEffect(() => {
    if (cleanSearch) {
      setInput({});
      props.cleanSearchCallback(false);
    }
    console.log('cleanSearch', input);
  }, [cleanSearch]);

  console.log('cleanSearch outer', input);

  /** controlled search input */
  const handleInputChange = e => {
    setInput({
      ...input,
      [e.currentTarget.name]: e.currentTarget.value,
    });
    props.appbarSearch(...input, e.currentTarget.value);
  };

  return (
    <StyledSearch
      type="search"
      placeholder="Type between 3 ~ 50 characters to find anything"
      isActive={isActive ? 'visible' : 'hidden'}
      name="searchbar"
      onChange={handleInputChange}
    />
  );
};

Answer 1

答案是在搜索栏中添加一个引用，如下面的代码所示（这是codesandbox中的可行示例）。再次感谢您对一个完全合理的问题的否决。

import React, { useRef } from "react";

const Search = () => {
  const ref = useRef();

  const clearValue = () => {
    if (ref.current) ref.current.value = "";
  };

  return (
    <div>
      <input ref={ref} name="search" />
      <button style={{ width: "50px", height: "50px" }} onClick={clearValue} />
    </div>
  );
};

export default Search;