Question

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

当前可以使用搜索输入，但是选择选项出现问题。我找到了一个选择过滤器的工作示例（this one here），但是在为我的解决方案调整它时遇到了问题。

我认为此功能是过滤数据的主要功能，但我不确定：

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

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

这是我的代码的JSFiddle示例：JS Fiddle Example

Answer 1

您需要在select上添加一个事件侦听器，以便在其更改时捕获该值。例如：

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

然后，您需要将select的当前值保存在组件的状态中，并根据它过滤列表，就像您进行搜索一样。

请参见this。可能重复。

Answer 2

您将必须在状态下将所选值存储在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>

ReactJS搜索和下拉过滤器已同步

2 个答案: