Question

我有一个从API调用返回的主题和组的列表。主题至少属于1个或多个组。当前，主题是按选定的组过滤的。在selectedGroups状态下设置或删除每个选定的组。我有一个输入搜索框，当他们开始在文本框中键入内容时，该框用于帮助用户找到主题。我想在下面显示一个下拉列表，以显示是否有任何主题标题与其搜索输入匹配。

示例..如果我输入..

“乔” 主题状态应该更新，其中所有包含文本“ Jo”的主题名称

已过滤的主题：约翰强尼琼等

我有名为handleInputChange的搜索输入和onchange方法我收到一个错误：类型“ PracticeAreas”上不存在属性“搜索”。并且不确定我应该朝着正确的方向前进。任何帮助都会非常感激，谢谢

我已包含来自API调用的示例数据还有react脚本

主要：

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>

Answer 1

class YourScreen extends StatelessWidget{

   //handler that we will use to show and hide widget
  ProgressBarHandler _handler;

  @override
  Widget build(BuildContext context){
    var scaffold = Scaffold(
      appBar: AppBar(title: Text("Title"),),

      body: _buildYourBodyLayout(),
    );

    var progressBar = ModalRoundedProgressBar(
      //getting the handler
      handleCallback: (handler) { _handler = handler;},
    );

    return Stack(
      children: <Widget>[
        scaffold,
        progressBar,
      ],
    );
  }

  // some code.... when you need to show a progres you will call: _handler.show();
  //when you want hide the progressbar ou call: _handler.dismiss();
}

在您的视图中呈现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); }); };的地图

如何在React中使用搜索输入建议

1 个答案: