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

Question

我有一个从 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)

},

Answer 1

我们遇到了同样的问题，@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 的状态和值，这样它就不会触发包含表的组件的重新渲染。