Javascript 按下父按钮后，受控挂钩输入未清除

我在标题组件中有一个搜索栏，如下图所示。单击搜索图标后，将显示搜索栏，您可以开始搜索。这里的想法是，一旦再次单击图标，搜索栏中的文本应重置为空状态。按下标题组件中的图标后，将触发

cleanearch

useffect。在这两个console.log中，我们发现输入的状态设置为

'

。然而，我目前的问题是，一旦我再次显示搜索栏，旧值仍然驻留在其中。似乎只有清除状态在这里不起作用。 我还尝试给

一个

值={input.value}

，并尝试了不同的方法来设置和清除状态。这里出了什么问题

编辑：我在这个沙箱中重新创建了问题

搜索栏组件中的受控输入

/** 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}
    />
  );
};

/**标题中的搜索栏*/
const SearchBar=props=>{
const{isActive，cleanSearch}=props；
const[input，setInput]=useState（{}）；
useffect（（）=>{
如果（拱门）{
setInput（{}）；
props.callback（false）；
}
console.log（'cleanSearch'，输入）；
}，[Arch]）；
console.log（'cleanSearch outer'，输入）；
/**受控搜索输入*/
常量handleInputChange=e=>{
设置输入({
…输入，
[e.currentTarget.name]：e.currentTarget.value，
});
props.appbarSearch（…输入，例如currentTarget.value）；
};
返回(
);
};

答案是在搜索栏中添加一个ref，如下面的代码所示（这是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;

import React，{useRef}来自“React”；
常量搜索=（）=>{
const ref=useRef（）；
常量clearValue=（）=>{
如果（ref.current）ref.current.value=“”；
};
返回(
);
};
导出默认搜索；

如果需要，我可以添加父标题组件。但我认为问题并不存在，因为它只会降低布尔值

props.cleanSearchCallback（false）

只负责重置父标题组件中的cleanSearch prop将您的值放入您的输入标记中，并在onclick函数上清除/重置输入栏。基本上，您需要告诉该组件清除其输入，我在上面没有看到任何操作。但如果没有更多的上下文，就很难说得更具体。请使用演示问题的工具更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX@T.J.Crowder如果我错过了命令，请清除输入。那是什么命令？在调用props.appbarSearch之前，我已经尝试在

中设置

value={input.value}

。将搜索值存储在变量中，只需将状态（即输入）更改为“”（空字符串）或null，然后调用prop函数（即props.appbarSearch）并分配新变量。