Question

我有一个从API填充的反应表。我想根据日期范围选择器过滤列。我遇到的问题是代码没有到达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-table＆＃39;过滤后的列表。

解决方案是以组件状态管理已过滤的列表：

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

或在单独的组件中管理DateRangePicker的状态和值，以便它不会触发包含该表的组件的重新呈现。

使用React Date Range选择器过滤React表

1 个答案: