javascript - 如何在选择选项中使用复选框？ react 钩子(Hook)

Question

目前我正在尝试创建这个设计。



它没有按预期打开和关闭。
我还创建了 codesandbox

三件事:
1.我有一个onClick，但我不确定我的逻辑是否正确打开和关闭按钮。另外应该有一个useEffect来这里听变化？

const showPlatformOptions =()=> {
  //  let checkboxes = el;
  //  console.log("ref:",myRef.current)
  //   if (!expanded) {
  //    //checkboxes.style.display = "block";
  //     setExpanded(true);
  //   } else {
  //   // checkboxes.style.display = "none";
  //     setExpanded(false);
  //   }


  }

我有一个名为 selectionOptions 的 onChange那应该让我知道选择了哪些平台，但目前一次只显示一个平台，为什么？

是否有另一种方法来创建此下拉列表和复选框。也许是一个使用钩子(Hook)的库？

任何帮助表示赞赏。

import React, { useState,useEffect, useRef} from "react";


const SearchBar =()=>{
  const [query, setQuery] = useState("");
  const [expanded,setExpanded] = useState(false);
  const [selectionOptions, setSelectionOptions] = useState(["Instagram","LinkedIn","Twitter"]);
  const myRef = useRef(null);

  const showPlatformOptions =()=> {
  //  let checkboxes = el;
  //  console.log("ref:",myRef.current)
  //   if (!expanded) {
  //    //checkboxes.style.display = "block";
  //     setExpanded(true);
  //   } else {
  //   // checkboxes.style.display = "none";
  //     setExpanded(false);
  //   }


  }

  const handleQueryChange = event => {
    console.log("Event:",event.target.value)
    setQuery(event.target.value);
  };

  return (
    <form onSubmit={showPlatformOptions}>
      <div className="w-64">
        <div className="relative" onClick={showPlatformOptions}>
          <h6>PLATFORMS </h6>
          <select className="w-full font-semibold"  onChange={handleQueryChange}>
              {selectionOptions.map((platform,x) => (
                  <option key={x} value={platform}>
                      {platform}
                  </option>
              ))}
          </select>
          <div className="absolute left-0 right-0 top-0 bottom-0"></div>
        </div>
        <div 
        ref={myRef}
        className="checkboxes border-gray-200 border border-solid">
          <label htmlFor="one" className="block ">
            <input type="checkbox" id="one" onChange={handleQueryChange} className="m-3"/>
            Instagram</label>
          <label htmlFor="two" className="block">
            <input type="checkbox" id="two" onChange={handleQueryChange} className="m-3"/>
            LinkedIn</label>
          <label htmlFor="three" className="block">
            <input type="checkbox" id="three" onChange={handleQueryChange} className="m-3"/>
            Twitter</label>
        </div>
      </div>
    </form>
  );
}

Answer 1

到目前为止，您的逻辑和代码非常接近，做得很好!我将按顺序回答您的问题:

1. I have a onClick, but I'm not sure if my logic is correct to open and close the button.Also should there be a useEffect here to listen to changes?

是的，您切换下拉菜单的隐藏和显示的逻辑是正确的。唯一的事情是你不必担心那里的 CSS。您可以使用此 bool 值在状态更改时显示或隐藏下拉菜单。

2. I have a onChange called selectionOptions that should let me know which platforms are selected, but it currently only shows one platform at a time, why?

好问题，原因是它触发了“每个”复选框的更改。当您更改复选框时，您将看到事件触发并仅显示新复选框的值。复选框本身就是 event.target指。不是整个表格

3. Is there another way to create this dropdown and checkbox. Maybe a library using hooks?

在这种情况下，我认为您不需要这样做。我采用了您的代码沙箱，并仅用一些额外的代码对其进行了增强，以显示您有多接近!
Here it is
我将指出我所做的一些更改:

我没有处理 CSS，而是使用了您的 expanded变量来确定我是否应该呈现下拉菜单。这个条件逻辑在第 50 行。

因为您想跟踪所有不同的查询，所以我更改了 query变量以跟踪在数组中选择了哪些查询。这样做的逻辑在第 26 行，但基本上如果用户取消选中一个复选框，我将其从数组中删除(如果它存在)，如果他们检查它，我将它添加到数组中(如果它不存在)。

我希望这可以帮助你!