代码之家 › 专栏 › 技术社区 › ZombieChowder

已同步ReactJS搜索和下拉筛选器

reactjs javascript

ZombieChowder · 技术社区 · 6 年前

我有一个搜索和下拉我要同步的reactjs页面上的选项。这意味着无论何时从下拉选项中选择一个元素,屏幕上的元素都只显示选定的过滤器。

搜索输入当前有效,但我对 选择选项 . 我找到了一个有效的例子( this one here )一个精选的过滤器,但我有问题适应我的解决方案。

我认为这里的这个函数是过滤数据的主要函数,但我不太确定:

changeOption: function(type, e) {
    var val = e.target.value;
    this.props.changeOption(val, type);
  }

如何根据选择选项值过滤数据?

下面是我的代码的jsfiddle示例: JS Fiddle Example

2 回复 | 直到 6 年前

Tasos 6 年前

您需要在select上添加一个事件侦听器,以便在值更改时捕获它。例如:

<select
  onChange={ () => this.handleSelectChange() }
  className="category-select" name="categories"
>
  {text.map(info => (
    <option value={info.role}>{info.role}</option>
  ))}
</select>

然后,您需要在组件状态下保存select的当前值,并根据该值过滤列表,与搜索的方式相同。

见 this . 可能是重复的。

Treycos 6 年前

必须将选定的值存储在 select 标记您的状态,并根据它筛选您的输出:

国家:

        this.state = {
            isLoading: false,
            data: [],
            searchString: '',
            roleFilter: null
        };

触发功能:

    changedRole = ev => {
        this.setState({ roleFilter: ev.target.value })
    }

更改事件:

<select className="category-select" name="categories" onChange={this.changedRole}>

过滤:

    {text.filter(info => roleFilter ? info.role.includes(roleFilter) : true).map(info => (
                    <div className="display">
                        <span className="role">Role: {info.role}</span><span>, Salary: {info.salary}</span>
                    </div>
                ))}

完整的工作代码:

    class Hello extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                isLoading: false,
                data: [],
                searchString: '',
                roleFilter: null
            };
        }
    
        componentDidMount() {
            this.fetchData();
        }
    
        handleChange = e => {
            this.setState({ searchString: e.target.value.trim().toLowerCase() });
        }
    
        fetchData() {
            fetch("https://api.myjson.com/bins/kr5kk")
                .then(response => response.json())
                .then(json => {
                    this.setState({
                        isLoaded: true,
                        data: json
                    });
                })
                .catch(error => console.log("parsing failed", error));
        }
    
        changedRole = ev => {
            this.setState({ roleFilter: ev.target.value })
        }
    
        render() {
            var { isLoaded, data, roleFilter, searchString } = this.state;
            let text = data;
            if (searchString) {
                text = text.filter(info => info.role.toLowerCase().match(searchString));
            }
            return (
                <div>
                    <input type="text" id="searchbar" value={searchString} onChange={this.handleChange}
                        placeholder="Search by Role" name="device">
                    </input>
    
                    <select className="category-select" name="categories" onChange={this.changedRole}>
                        <option value={''}></option>
                        {text.map(info => (
                            <option value={info.role}>{info.role}</option>
                        ))}
                    </select>
                    {text.filter(info => roleFilter ? info.role.includes(roleFilter) : true).map(info => (
                        <div className="display">
                            <span className="role">Role: {info.role}</span><span>, Salary: {info.salary}</span>
                        </div>
                    ))}
                </div>
            );
        }
    }
    
    ReactDOM.render(
        <Hello name="World" />,
        document.getElementById('container')
    );

.display{
  background-color:#b6d0f9;
  margin-top:10px;
  padding-top:10px;
  padding-bottom:10px;
}
.role{
  color:red;
}
#searchbar{
  margin-right:150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>