Установить состояние с реакцией на данные фильтра - PullRequest
Новая
       21

Установить состояние с реакцией на данные фильтра

0 голосов
/ 18 декабря 2018

У меня есть список групп и тем, группы показаны в виде пунктов списка и тем чуть ниже.Темы могут принадлежать как минимум к одной группе.Я хочу иметь возможность добавить событие щелчка в группы, чтобы для каждой выбранной группы затем было установлено состояние, а затем состояние тем было отфильтровано соответствующим образом.

Я должен иметь возможность выбирать / отменять выбор групп и обновлений состояния, я знаю, что они неизменны, значит ли это, что каждый раз это новое состояние?

Каждая выбранная группа должна быть установлена ​​в состояние selectedGroups.Я создал метод, который проверяет, принадлежит ли тема какой-либо группе, но не уверен, что это точные

выбранные здесь группы, которые затем должны вызвать функцию setSelected, чтобы установить состояние выбранных групп ... затем состояние темфильтруется .. надеюсь, что это понятно .. спасибо за любую помощь 

<a className="navigator-tags">
    -- call selectedGroups to set state..
    {item.name}
</a>

Метод для установки состояния .. 

public setSelectedGroups = (topic: IReportGroup) => {
    this.setState({
       selectedGroups: ...
    });
}

Весь сценарий реакции: 

import * as React from 'react';
import './PracticeAreas.css';
import IReportGroup from 'src/model/IReportGroup';
import { IReportTopicSummary, IReportTopic } from 'src/model/IReport';

export interface IReportTopicSummary {
    id: string,
    name: string
}

export interface IReportTopic {
    id: string
    name: string
}


interface IOwnProps {
    type: 0
}

interface IOwnState {
    groups: IReportGroup[],
    topics: IReportTopic[],
    selectedGroups: IReportGroup[]
}

class PracticeAreas extends React.Component<IOwnProps, IOwnState> {

    constructor(props: IOwnProps) {
        super(props);
        this.state = {
          groups: [],
          topics: [],
          selectedGroups: []
        }
      }

    public render() {

        const { topics } = this.state;

        return topics ?
            this.renderData(topics) :
            this.renderLoading();
    }

    public renderLoading () {
        return <div>Loading...</div>;
    }

    public renderData(data: any) {
        // if (data && data.length > 0) {
            return (
            <div className="col-md-12 practiceAreas">
                <h1>Practice Areas</h1>
                <div className="item-container plain-bg selection-refinement">
                    <div className="refinement-search">
                        <input type="text" value="" placeholder="What are you looking for?" />
                    </div>
                </div>

                <ul className="list-inline groupedTags">
                    {this.state.groups.map((item,i) => 
                        <li key={i}>
                            <a className="navigator-tags">
                                {item.name}
                            </a>
                        </li>
                    )}
                </ul>

                <div className="row practiceAreasContainer">
                    {this.state.topics.filter(topic => this.isTopicInCurrentGroup(topic)).map((item,i) => 
                        <div key={i} className="result">
                            <div className="col-md-6 result-item">
                                <div className="item-container default shadowed item-content highlight row">
                                    <div className="col-sm-12 no-padding">
                                        <p>Editor: <a href="#">John Sinclair</a>, <a href="#">Eric Draven</a>, <a href="#">Coco Zames</a></p>
                                        <p><a href="#">Beiten Burkhardt</a></p>
                                        <div className="row no-margin">
                                            <div className="col-12 col-sm-10 text-content">
                                                <h3>
                                                    <a href="#" >{item.name}</a>
                                                </h3>
                                                <p className="summary">
                                                    Summary
                                                </p>
                                            </div>
                                            <div className="col-10 col-sm-2 links-container rhs">
                                                <a href="#">Compare</a>
                                                <div className="divider" />
                                                <a href="#">View</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
                <div className="row text-center">
                    <a className="lex-primary-btn medium-btn">Load more</a>
                </div>
            </div>
            );
        // } else {
        //     return <div>No items found</div>;
        // }
    }

    public componentDidMount() {
        fetch(`.../navigator/reports/groups`, {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json"
            }})
        .then((res) => res.json()
        .then((data) => { 
            this.setState({ 
                groups: data.groups,
                topics: data.data
            });
        }));
    }

    public setSelectedGroups = (topic: IReportTopic) => {
        this.setState({
           // selectedGroups: ...
        });
    }

    public isTopicInCurrentGroup = (topic: IReportTopic) => { 
        return (this.state.selectedGroups.length > 0 ? this.state.selectedGroups.some(item => topic.id === item.id) : true)
      } 
}

export default PracticeAreas

1 Ответ

0 голосов
/ 18 декабря 2018

Если я правильно понял, вы пытаетесь сделать следующее: 

public setSelectedGroups = (topic: IReportTopic) => {
  if (this.isTopicInCurrentGroup(topic)) {
    this.setState(state => ({
      selectedGroups: state.selectedGroups.filter(t => t.id !== topic.id)
    }));
  } else {
    this.setState(state => ({
      selectedGroups: [...state.selectedGroups, topic]
    }));
  }
}
...