js反应将下拉列表转换为复选框过滤器

Question

嘿！

我是 javascript 的新手，但能够实现下拉菜单过滤我的 json-数据（一切正常），但是当我 convert/change 将其放入复选框时，我赢了'在我的结果列表中得到任何结果。

// dropdown

const ContentBuilder = () => {
    const options = [
        { label: "Landwirtschaft", value: "Landwirtschaft" },
        { label: "Forstwirtschaft", value: "Forstwirtschaft" },
        ]

    const [newData, setNewData] = React.useState([]);
    const [selectedValue, setSelectedValue] = React.useState(options[0]);

    const filteredData = data.filter(x => 
        x.Sektor == selectedValue)

    const handleFilterInput = (event) => {
        let value = event.target.value;
        setSelectedValue(value);
    };


    return (
        <section className="content">
            <div className="container">
                <div className="columns table">
                    <div className="column is-four-fifth filter">
                        <label>Sektion <br/>
                            <select 
                               value={selectedValue} 
                               onChange={handleFilterInput}
                             >
                            {options.map((option) => (
                                <option value={option.value}>{option.label}</option>
                            ))}
                            </select>
                        </label>
                    </div>
                    <div className="column is-one-fifth">
                        <div className="container">
                            <div className="liste">
                                <List data={filteredData}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

如果我只将 select 更改为 input 并添加 'checkbox' 类型，我得到的只是一个空页面

// checkboxes

.
.
.

<input
type = "checkbox"
className = "sektor-checkbox"
value={selectedValue} 
onChange={handleFilterInput}
>
    {options.map((option) => (
        <option value={option.value}>{option.label}</option>
    ))}
</input>
.
.
.

如果我将 'checkbox' 放在地图中，我会得到复选框但没有结果列表，因此没有过滤器。

.
.
.

{options.map((option) => (
<>
<input
type = "checkbox"
className = "sektor-checkbox"
value={selectedValue} 
onChange={handleFilterInput}
>
</input>
<option value={option.value}>{option.label}</option>
</>
))}

.
.
.

// json

[
    {
        "Pflanzenname": ["Hanf (Samen-/Faser-)"],
        "Sektor":       "Landwirtschaft",
    },{
        "Pflanzenname": "Soja",
        "Sektor":       "Landwirtschaft",
    },{
        "Pflanzenname": "Hirse (Sorghum-/Zucker-)",
        "Sektor":       "Landwirtschaft",
    },{
        "Pflanzenname": "Riesenweizengras",
        "Sektor":       "Forstwirtschaft",
    }
]

工作下拉菜单：

https://codesandbox.io/s/shy-bash-bj5f5s?file=/src/contentBuilder.js

复选框无效：

https://codesandbox.io/s/vigilant-sun-mh3rg9?file=/src/App.js

有人知道我错过了什么吗？任何帮助表示赞赏！ :)

Answer 1

阅读此文档GoodPractice

像这样使用复选框列表

<div className="checkList">
  <div className="title">Your CheckList:</div>
     <div className="list-container">
         {options.map((item, index) => (
            <div key={index}>
            <input onChange={handleCheck} value={item.value} type="checkbox" />
             <span>{item.value}</span>
          </div>
    ))}
    </div>
</div>

在更改处理程序中这样写

const handleCheck = (event) => {
    var updatedList = [...checked];
    if (event.target.checked) {
      updatedList = [...checked, event.target.value];
    } else {
      updatedList.splice(checked.indexOf(event.target.value), 1);
    }
    setChecked(updatedList);
  };

实例Sandbox

Answer 2

我希望这个解决方案对你有用，查看这个实例

Sandox

像这样使用过滤器逻辑

const filteredData = data.filter(
    (x) => x.Sektor === checked.find((item) => item === x.Sektor)
  );

js反应将下拉列表转换为复选框过滤器

js react converting dropdown to checkbox filter

javascript

checkbox

json

filter

reactjs