如何从下拉框中的数据过滤reactTable中的数据

时间:2019-07-07 19:09:19

标签: reactjs filter redux react-table

我是ReactJS的新手。

我正在获取数据以加载网格“ populateGrid()”,并获取另一个以阶段“ populateDropDown()”填充下拉列表

$response = $this->call('POST', '/api', [$xml]);

然后渲染:

const optionsStages = []

class CommentsTableComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            filterDescription: '',
            projectID: '',
            xtoken: '', 
        };

      this.populateGrid = this.populateGrid.bind(this);
        this.populateDropDown = this.populateDropDown.bind(this);
        localStorage.setItem("projectID", this.props.match.params.projectID)
    }
    componentDidMount() {
        this.populateGrid();
        this.populateDropDown();
    }

    populateGrid() {
        const tokenvalue = document.getElementsByName("__RequestVerificationToken")[0].value;
        projectID = this.props.match.params.projectID;

        let config = {
            method: 'POST',
            body: JSON.stringify({ projectID: projectID }),
            headers: {
                "XSRF-TOKEN": tokenvalue,
                "Content-Type": "application/json; charset=utf-8"
            }
        }

        fetch('/WebServices/GetThreadsByProjectID?handler=Send', config)
            .then(res => res.json())
            .then(response =>
                this.setState({
                    data: response,
                    projectID: projectID
                }, () => {
                    console.log(this.state.data[0]);
                })
            )
            .catch(error => console.error('Error:', error));
    }

    populateDropDown() {
        const tokenvalue = document.getElementsByName("__RequestVerificationToken")[0].value;
        projectID = localStorage.getItem("projectID");

        let config = {
            method: 'POST',
            body: JSON.stringify({ projectID: projectID }),
            headers: {
                "XSRF-TOKEN": tokenvalue,
                "Content-Type": "application/json; charset=utf-8"
            }
        }

        fetch('/WebServices/GetStagesByProjectID?handler=Send', config)
        .then(res => res.json())
        .then(response => {
            const allObj = { value: 'all', label: 'All' };
            var newStages = Array.from(response, obj => {
                var rObj = { value: obj.id, label: obj.stage };
                return rObj;
            });
            newStages.push(allObj);
            this.setState({
                optionsStages: newStages,
                projectID: projectID
            }, () => {
                console.log(this.state.optionsStages);
            })
        })
        .catch(error => console.error('Error:', error));
    }

    handleDropDownChange(event) {
        console.log("event:", event)
        this.setState({ value: event.target.value });
        console.log("propreities:", this.state)
    }

我能够使用populateDropDown()返回的数据加载下拉列表,但我想按阶段(第3行)进行过滤。

我看了其他示例,但是区别是我正在从数据库中加载下拉数据。

0 个答案:

没有答案