reactjs - 使用 react 日期范围选择器过滤 react 表

我有一个从API填充的 react 表。我想根据日期范围选择器过滤列。问题是代码未到达FilterMethod。我可能做错了什么？这是我的代码

const columnsvisit = [{
  id: 'date',
  Header: 'Date',
  accessor: rowProps => rowProps.date,

  Filter: ({ filter, onChange }) =>
       <div>
        <DateRangePicker  startDate={this.state.startDate}
                          endDate={this.state.endDate} ranges={this.state.ranges}
                          onEvent={this.handleEvent}
                          >

        <Button className="selected-date-range-btn" style={{width:'100%'}}>


            <span >
            <input type="text" name="labrl" value={label }
            onChange={event => onChange(event.target.value)} readOnly
            />
            </span>
            <span className="caret"></span>

        </Button>
      </DateRangePicker>
      </div>,
 filterMethod: (filter, row) => {
  console.log(filter.value)

},

最佳答案

我们遇到了同样的问题，@CrustyRatFink发现问题是我们正在使用组件状态来管理DateRangePicker的值，因此，当您更改日期时，它将触发重新渲染，从而清除了 react 表的过滤列表。

解决方案是在组件状态下管理过滤列表:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
       filtered: []
    }
  }
  render() {
    return (
      <ReactTable
        filtered={this.state.filtered}
        onFilteredChange={filtered => this.setState({ filtered })}
        ...
      />
    )
  }
}

或在单独的组件中管理DateRangePicker的状态和值，以免触发包含表的组件的重新渲染。

关于reactjs - 使用 react 日期范围选择器过滤 react 表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47219147/