根据reactjs

时间:2019-02-11 10:24:27

标签: reactjs

嗨,我想根据从下拉菜单中选择的选项来更新项目。

默认情况下,将列出完成的项目。当我选择“全部”选项时,从下拉菜单(包含所有,活动,完成的选项)应显示活动和完成的项目。选择“完成”后,应显示完成的项目。同样,在选择“活动”时应显示活动项目。

该项目包含字段,即名称,描述,分辨率。我将resolution_query状态初始化为null,默认情况下显示活动项目。而且我将resolution_query状态更新为活动,已完成或全部。现在的问题是,当我从下拉菜单中选择任何选项(全部,活动,完成)时,不会根据查询列出项目。下面是代码。

有人可以帮我这个忙吗?谢谢。

 class ItemsLayout extends React.PureComponent {

  state = {
      resolution_query: null,
  };

  componentDidMount() {
      this.start_polling();
  }

  componentWillUnmount() {
      this.stop_polling();
  }

  componentDidUpdate(prevProps) {
    const {state, props} = this;
    if (this.should_poll(props, state)) {
        this.start_polling();
    } else {
        this.stop_polling();
    }

    start_polling = () => {
    if (!this.is_polling && this.should_poll(this.props, this.state)) 
    {
        this.is_polling = true;
        this.poll();
    }};

    poll = () => {
        const items_promise = 
            client.get_items_for_model(this.props.model.id, 
            this.state.resolution_query, this.stop_polling_promise);
        items_promise.then((request) => {
            const state = this.state;
            const next_state = {items: request.respone};
            if (state.opened_item) {
                next_state.opened_item = next_state.items.find(t => t.id 
                === state.opened_item.id);
            }
            this.setState(next_state);})

            stop_polling = () => {
                if (this.on_stop_polling) {
                    this.on_stop_polling();
                }
            };

            handle_items_select_click = (resolution_query) => {
                this.setState({resolution_query: resolution_query});
            };

            return (
                <ItemsList on_items_select_click= 
                    {this.handle_items_select_click}/>
            );}
Class ItemsList extends React.PureComponent {
     <Dropdown>
         <DropdownItem on_select= 
             {this.handle_show_all_annotations_click}>All</DropdownItem>
         <DropdownItem on_select= 

        {this.handle_show_active_annotations_click}>Active</DropdownItem>
        <DropdownItem on_select={this.handle_show_resolved_annotations_click}>Resolved</DropdownItem>
    </Dropdown>

0 个答案:

没有答案