如何在选择选项中使用复选框？反应钩子

Question

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

它没有按预期打开和关闭。我还创建了一个代码沙盒

三件事：
1.我有一个onClick，但我不确定我打开和关闭按钮的逻辑是否正确。还应该有一个useEffecthere来听更改吗？

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);
  //   }


  }

2. 我有一个 onChange 调用selectionOptions应该让我知道选择了哪些平台，但它目前一次只显示一个平台，为什么？

3. 是否有另一种方法来创建此下拉列表和复选框。也许是使用钩子的图书馆？

任何帮助表示赞赏。

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. 我有一个 onClick，但我不确定我的逻辑是否正确打开和关闭按钮。这里还应该有一个 useEffect 来监听更改吗？

是的，您切换下拉列表的隐藏和显示的逻辑是正确的。唯一的事情是你不必担心 CSS 的问题。您可以使用此布尔值在状态更改时显示或隐藏下拉列表。

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

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

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

我认为在这种情况下你不需要这样做。我采用了您的代码沙箱，并仅用一些额外的代码对其进行了增强，以显示您有多接近！

这里是

我将指出我所做的一些更改：

1. 我没有处理 CSS，而是使用你的expanded变量来确定是否应该渲染下拉列表。该条件逻辑位于第 50 行。

2. 因为您想要跟踪所有不同的查询，所以我更改了变量query以跟踪在数组中选择了哪些查询。其逻辑位于第 26 行，但基本上，如果用户取消勾选复选框，我会将其从数组中删除（如果存在），如果他们选中它，我会将其添加到数组中（如果不存在）。

我希望这可以帮助你！