Question

我有一个组和主题的列表，组显示为下面的列表项和主题。主题可以至少属于一组。我希望能够将click事件添加到组中，以便为每个选定的组设置一个状态，然后相应地过滤主题状态。

我应该能够选择/取消选择组以及状态更新，我知道它们是不可变的，这是否每次都意味着新的状态？

每个选定的组应设置为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

Answer 1

如果我理解正确，则您正在尝试执行以下操作：

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]
    }));
  }
}

设置状态以响应过滤数据

1 个答案: