How to immediately display result after delete the search field ReactJS Antd-CodePudding

I am working on the searching of table using ReactJs and Antd. What I want to do is when I delete the input field, the table will immediately re-render and show the full data while I don't need to press Enter or click on the Search button. Is there any way to do that? Thank you.

Code here

const [dataSource, setDataSource] = useState([])

const handleSearch = (value) => {
    let newData = [...data]
    const filterData = arrClone.filter((o) => Object.keys(o).some((k) => String(o[k])
      .toLowerCase()
      .includes(value.toLowerCase())));
    setDataSource(filterData);
  };

Search field and Table

<Row>
   <Col lg={24}>
       <Search
         size='large'
         placeholder='Search something'
         enterButton='Search'
         prefix={<SearchOutlined />}
         style={{ borderRadius: 5 }}
         allowClear
         onSearch={handleSearch}
       />
       <Table
         columns={columns}
         dataSource={dataSource}
         rowSelection={rowSelection}
       />
     </Col>              
</Row>

CodePudding user response：

You can add the onChange property to Search and pass your handleSearch function into it