按名称和日期搜索react redux tyspript中的过滤器

Question

我目前正在学习React，更具体地说是Typescript和Redux。我需要用名称和日期进行搜索过滤器。我用Antd（带钩子）的Rangepicker制作了一个日期过滤器，但我不知道如何用名字制作一个。

const [searchTerm, setSearchTerm] = useState<string[]>([]);
  <Space direction="vertical" size={12}>
    <RangePicker onChange={(dates, datesString) => {setSearchTerm(datesString)}}/>
  </Space>
  <Table 
    className='tablica' 
    columns={columns} 
    dataSource={todoHistory.filter((val) => {
      if(searchTerm.length > 0){
        if(moment(val.datum).diff(searchTerm[0]) >= 0 && 
          moment(val.datum).diff(searchTerm[1]) <= 0 ) {
          return val
        }
      }else{ return val; }
    )} 
  />

Answer 1

实现所需的一种方法是创建另一个状态以保持名称，该名称将用于过滤，并在todohistory.filter.filter 。

const [searchTerm, setSearchTerm] = useState<string[]>([]);
const [name, setName] = useState('');

<input value={name} onChange={(event) => setName(event.target.value)} />

<Space direction="vertical" size={12}>
  <RangePicker onChange={(dates, datesString) => {setSearchTerm(datesString)}}/>
</Space>

<Table 
  className='tablica' 
  columns={columns} 
  dataSource={todoHistory
    .filter((val) => {
      if(searchTerm.length > 0) {
        return moment(val.datum).diff(searchTerm[0]) >= 0 &&
               moment(val.datum).diff(searchTerm[1]) <= 0;
      }
    
      return true;
    })
   .filter((val) => {
      /* replace val.name with your attribute name */
      return val.name.includes(name);
    })
  } 
/>

请注意，我已将第一个过滤器的实现更改为返回boolean，因为它更准确地使用了filter期望返回的内容。

Answer 2

我设法通过使用效果挂钩解决了这个问题，并创建了另一个状态。
因此，我创建了另一个状态：

const [searchText, setSearchText] = useState('');
  

然后使用效果挂钩：

    useEffect(() => { console.log(searchText);
setTodoHistory(todoHistory.filter((todoItem) => {
    if(todoItem.naziv?.toLowerCase().includes(searchText.toLowerCase())){
      return todoItem;
    }
}))

}，[searchText]）;

然后我做了一个输入：

   <Input className="search-text" placeholder='Search...' type='text' onChange={event => {setSearchText(event.target.value)}}/>