Как использовать предложения ввода поиска в React - PullRequest
Новая
       39

Как использовать предложения ввода поиска в React

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

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

Пример .. если я наберу ..

"Джо" Состояние тем должно обновляться, где все названия тем, которые содержаттекст "Джо"

Темы отфильтрованы: Джон Джонни Джоан и т. д.

У меня есть метод ввода и поиска поиска с именем handleInputChange Я получаю сообщение об ошибке: Свойство 'поиск' не существует для типа 'PracticeAreas.и не уверен, куда я должен идти, чтобы заставить это работать правильно.Любая помощь была бы очень благодарна, спасибо

Я включил пример данных из вызова API И сценарий реакции

Main: 

import * as React from 'react';
import './PracticeAreas.css';
import IReportGroup from 'src/model/IReportGroup';
import { Loader } from '../loader/Loader';
import Suggestions from './Suggestions'

export interface IGroupTopics {
    id: string
    name: string,
    groups: string[]
}

interface IOwnProps {

}

interface IOwnState {
    groups: IReportGroup[],
    topics: IGroupTopics[],
    selectedGroups: IReportGroup[],
    query: string,
}

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

    constructor(props: IOwnProps) {
        super(props);

        this.state = {
          groups: [],
          topics: [],
          selectedGroups: [],
          query: ""
        }
      }

    public render() {
        const { topics } = this.state;

        return topics.length > 0 ?
            this.renderData(topics) :
            <Loader />
    }

    public renderData(data: any) {
        return (
        <div className="col-md-12 practiceAreas">
            <h1>Practice Areas</h1>

            <div className="selection-refinement">
                <div className="refinement-search">
                    <form>
                        <input
                        placeholder="Search for..."
                        ref={input => this.search = input}
                        onChange={this.handleInputChange}
                        />
                        <Suggestions topics={this.state.topics} />
                    </form>
                </div>
            </div>

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

            <div className="row practiceAreasContainer">
                {this.state.topics.filter(topic => this.topicInGroupSelection(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>
        );
    }

    public handleInputChange = () => {
        this.setState({
          query: this.search.value
        }, () => {
          if (this.state.query && this.state.query.length > 1) {
            // this.showDropdown()
            if (this.state.query.length % 2 === 0) {
              this.state.topics
            }
          } else if (!this.state.query) {
            // this.hideDropdown()
          }
        })
      }

    public componentDidMount() {
        fetch(`.../api/v2/navigator/reports/topics`, {
            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 = (group: IReportGroup) => { 
        // remove from state
        if (this.groupInState(group)) {
            this.setState(state => ({
                selectedGroups: state.selectedGroups.filter(t => t.id !== group.id)
            }));      
        // set state       
        } else {
            this.setState(previousState => ({
                selectedGroups: [...previousState.selectedGroups, group]
            }));        
        }
    }

    public topicInGroupSelection = (topic: IGroupTopics) => { 
        return (this.state.selectedGroups.length > 0 ? this.state.selectedGroups.some(item => topic.groups.some(group => group === item.id)) : true)
    } 

    public groupInState = (group: IReportGroup) => {
        return this.state.selectedGroups.some(item => group.id === item.id);
    }
}

export default PracticeAreas

Предложения (которые должны бытьтемы в государстве): 

import * as React from 'react';

const Suggestions = (props) => {
  const options = props.topics.map(r => (
    <li key={r.id}>
      {r.name}
    </li>
  ))
  return <ul>{options}</ul>
}

export default Suggestions

Данные например: 

<ReportSelectionCriteriaResponse xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/">
    <Data xmlns:d2p1="http://schemas.datacontract.org/2004/07/">
        <d2p1:NavigatorReportSelection>
            <d2p1:About>test title 4</d2p1:About>
            <d2p1:Groups xmlns:d4p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
                <d4p1:guid>d21384b5-27be-4bfc-963d-0d2ad40dbbfb</d4p1:guid>
            </d2p1:Groups>
            <d2p1:Id>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d2p1:Id>
            <d2p1:Name>Test</d2p1:Name>
            <d2p1:ParentId i:nil="true"/>
            <d2p1:Selected>false</d2p1:Selected>
            <d2p1:Type>Topics</d2p1:Type>
            <d2p1:Visible>true</d2p1:Visible>
        </d2p1:NavigatorReportSelection>
        <d2p1:NavigatorReportSelection>
            <d2p1:About i:nil="true"/>
            <d2p1:Groups xmlns:d4p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
                <d4p1:guid>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d4p1:guid>
            </d2p1:Groups>
            <d2p1:Id>47cb7f1d-2267-426c-9f7f-0df3b9291fb7</d2p1:Id>
            <d2p1:Name>Another test topic</d2p1:Name>
            <d2p1:ParentId i:nil="true"/>
            <d2p1:Selected>false</d2p1:Selected>
            <d2p1:Type>Topics</d2p1:Type>
            <d2p1:Visible>true</d2p1:Visible>
        </d2p1:NavigatorReportSelection>
    </Data> 
    <Groups xmlns:d2p1="http://schemas.datacontract.org/2004/07/">
        <d2p1:NavigatorReportSelectionGroup>
            <d2p1:Focused>false</d2p1:Focused>
            <d2p1:Id>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d2p1:Id>
            <d2p1:Name>Allan's Test group</d2p1:Name>
            <d2p1:Order>0</d2p1:Order>
            <d2p1:Type>Topics</d2p1:Type>
        </d2p1:NavigatorReportSelectionGroup>
        <d2p1:NavigatorReportSelectionGroup>
            <d2p1:Focused>false</d2p1:Focused>
            <d2p1:Id>47cb7f1d-2267-426c-9f7f-0df3b9291fb7</d2p1:Id>
            <d2p1:Name>Another test topic group</d2p1:Name>
            <d2p1:Order>1</d2p1:Order>
            <d2p1:Type>Topics</d2p1:Type>
        </d2p1:NavigatorReportSelectionGroup>
    </Groups>
</ReportSelectionCriteriaResponse>

1 Ответ

0 голосов
/ 20 декабря 2018 
  handleInputChange = e => {
    let newState = Object.assign({}, this.state);
    newState.matchedResults = [];
    newState.topics.forEach(topic => {
      if (
        topic.name.toLowerCase().indexOf(e.target.value.toLowerCase()) !== -1 &&
        e.target.value.length > 0
      ) {
        newState.matchedResults.push(topic);
      }
    });
    this.setState(newState, () => {
      console.log("Your found results", this.state.matchedResults);
    });
  };

Предоставьте на ваш взгляд карту this.state.matchedResults

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...