Javascript 从React类转换为function组件后，搜索功能不再工作

在问题的帮助下，我将React类组件转换为函数组件

除此按钮外，所有功能均正常工作：

{/* 
            Show only if user has typed in search.
            To reset the input field, we pass an 
            empty value to the filterUpdate method
          */}
{hasSearch && <button onClick={filterUpdate}>Clear Search</button>}

但这会停止搜索功能的工作。 这是旧的（类组件）代码（正在运行）

{hasearch&&(
清查
)}

所有代码都在另一个问题中。但这提供了上下文

 // update filterText in state when user types
  const filterUpdate = (value) => {
    setfilterText(value);
  };


/* ###################### */
/* ##### Search bar ##### */
/* ###################### */

// need a component class here
// since we are using `refs`
class Search extends Component {
  render() {
    const { filterVal, filterUpdate } = this.props;
    return (
      <form>
        <input
          type="text"
          ref="filterInput"
          placeholder="Type to filter.."
          // binding the input value to state
          value={filterVal}
          onChange={() => {
            filterUpdate(this.refs.filterInput.value);
          }}
        />
      </form>
    );
  }
}

//当用户键入
常量过滤器更新=（值）=>{
setfilterText（值）；
};
/* ###################### */
/*搜索栏*/
/* ###################### */
//这里需要一个组件类
//因为我们使用的是'refs'`
类搜索扩展组件{
render（）{
const{filterVal，filterUpdate}=this.props；
返回(
{
filterUpdate（this.refs.filterInput.value）；
}}
/>
);
}
}

首先，您需要执行以下操作：

<button onClick={() => filterUpdate("")}> Clear Search</button>

filterUpdate（“”）}>清除搜索

---

这将立即停止调用它

修复它，谢谢。系统允许时，我将接受：）

 // update filterText in state when user types
  const filterUpdate = (value) => {
    setfilterText(value);
  };


/* ###################### */
/* ##### Search bar ##### */
/* ###################### */

// need a component class here
// since we are using `refs`
class Search extends Component {
  render() {
    const { filterVal, filterUpdate } = this.props;
    return (
      <form>
        <input
          type="text"
          ref="filterInput"
          placeholder="Type to filter.."
          // binding the input value to state
          value={filterVal}
          onChange={() => {
            filterUpdate(this.refs.filterInput.value);
          }}
        />
      </form>
    );
  }
}

<button onClick={() => filterUpdate("")}> Clear Search</button>