Question

我想根据从下拉菜单中选择的值在输入字段中输入的搜索查询来过滤数据。

我要做什么？考虑下图

从选择下拉选项中，用户可以选择消息和信息，也可以选择两个选项之一。根据从下拉菜单中选择的选项以及在搜索输入字段中输入的搜索查询，它应该过滤数据。

假设用户选择了消息并输入了搜索查询“ hello”，则应该检索包含文本“ hello”的消息，并且同样具有info和messages选项。

我不确定该怎么做。有人可以帮我解决这个问题吗？

下面是代码，

<div className='wrapper'>
    <div>
        {!state.expanded && <Svgsearch/>}
                {state.expanded && props.active && <div onClick= 
                    {this.collapse_input}><Svgsearch/></div>}
                {state.expanded &&
                    <div className="search_input">
                        <input type="text" placeholder="search query" />
                    </div>}
                <div className="search_dropdown">
                    <FieldDropdown on_dropdown_toggle= 
                        {this.handle_dropdown_toggle} />
                </div>
            </div>
        </div>);

export default class FieldDropdown extends react.component {
    render = () => {
    return (
        <Dropdown className="category_dropdown" on_dropdown_open= 
            {this.handle_dropdown_open} on_dropdown_close= 
            {this.handle_dropdown_close}>
                <div>
                    <button>{dropdown_text}</button>
                </div>

            {state.options.map((option, i) => {
                return (
                    <DropdownItem key={i} on_select= 
                        {this.handle_option_selection} value={i}>
                        <input type="checkbox" value={option.value} 
                            checked="true" readOnly />
                        <span> 
                            {option.text}</span>
                    </DropdownItem>)
            })}
        </Dropdown>);
};

考虑我在一组对象中有消息和信息。

如何编写一种方法，用于根据从下拉菜单中选择的选项过滤数据。

谢谢。

Answer 1

查询字段的HTML

 <input
            id="searchId"
            type="text"
            value={this.state.queryValue}
            onChange={this.handleTextChange}
          />

州

 state = { data: [], filteredData:[],queryValue: '' ,value:'' };

事件处理方法

     handleTextChange = event => {
//read the value of the textbox with event.target.value
        const filteredData = this.state.data.filter(d =>
        //  object where condition based on value(options value) & queryValue
        );
        this.setState({ queryValue: event.target.value, filteredData});
      };

并将UI绑定到filteredData。

如何根据下拉菜单中的选定值过滤数据并使用reactjs在输入字段中搜索查询？

1 个答案: