如何通过单击反应 js 中的按钮将输入字段中的值设置为空？

Question

如何通过单击 React js 中的按钮将输入字段中的值设置为空？ 我认为通过单击按钮清空输入字段是一个简单的步骤，虽然这很简单，但我的代码不起作用。我正在使用 Ant design onSearch 输入字段。我希望当我点击 CloseCircleOutlined 按钮时，输入字段必须设置为空。请帮我解决这个问题。这是我的代码：

const [search, setSearch] = useState("");
  
  
  const handleChange = (value) => {
    setSearch(value);
  }
  
  const onSearch = () => {
       if(search){
        mutation()
        setisSearched(true);
  }
      setCurrentPage(1);
    }
    

const handleCloseButton = (e)=>{
setSearch(" ")

  }
    
   <SearcI want thath
      enterButton="Search"
      size="large"
      placeholder="Search Product"
      className="search_bar"
      onSearch={onSearch}
      onChange={(e) => handleChange(e.target.value)}
      />
      
         <Text>Showing results for {`"${search} "`}  <CloseCircleOutlined onClick={handleCloseButton}/></Text>

Answer 1

我猜您已经设置为空字符串，但您没有在搜索组件中使用该参数。你应该使用值

<Search
      enterButton="Search"
      size="large"
      placeholder="Search Product"
      className="search_bar"
      onSearch={onSearch}
      onChange={(e) => handleChange(e.target.value)}
      value={search}
      />

如何通过单击反应 js 中的按钮将输入字段中的值设置为空？

How to set value in input field to empty by click on a button in react js?

reactjs

react-hooks