下拉/关闭块

Question

在我的应用程序中有一个过滤器按钮，单击后，用户可以看到用于过滤的类别列表（使用模态 window 完成）（类别是：方法、状态代码、Link, 日期).

但是，我希望折叠和展开所有类别（方法、状态代码、Link、日期）。

我的代码分为块（每个过滤器类别都有一个单独的文件）。这里我将举例说明我是如何通过方法构建过滤的。如果你告诉我如何改变它，使这个类别可以打开和关闭，我将不胜感激（对于其余的类别，我会自己做）

export default function FilterMethod  () {
const [methods, setMethods] = useState([]);

const onMethodChange = (e) => {
    let selectedMethods = [...methods];

    if (e.checked)
        selectedMethods.push(e.value);
    else
        selectedMethods.splice(selectedMethods.indexOf(e.value), 1);

    setMethods(selectedMethods);
}

return (
        <div>
            <h6>Method</h6>
            <div style={{display: "flex"}}>
                <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
                <label  htmlFor="method1">Connect</label>
            </div>

            <div style={{display: "flex"}}>
                <Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf('Delete') !== -1} />
                <label htmlFor="method2">Delete</label>
            </div>

         // Here I shortened the code, since it's just a list of methods

        </div>

)}

.css 文件

    input[type="checkbox"] {
    width: 50px;
    height: 18px;
    vertical-align: middle;
}

Answer 1

也许您的组件中的此更改会有所帮助？我刚刚添加了一个本地状态 isExpanded 来标记 expand/collapse 状态，它应该相应地渲染到不同版本的组件

export default function FilterMethod() {
  const [methods, setMethods] = useState([]);
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };

  const onMethodChange = (e) => {
    let selectedMethods = [...methods];

    if (e.checked) selectedMethods.push(e.value);
    else selectedMethods.splice(selectedMethods.indexOf(e.value), 1);

    setMethods(selectedMethods);
  };

  return isExpanded ? (
    <div>
      <h6>Method</h6>
      <div style={{ display: "flex" }}>
        <Checkbox
          inputId="method1"
          name="method"
          value="Connect"
          onChange={onMethodChange}
          checked={methods.indexOf("Connect") !== -1}
        />
        <label htmlFor="method1">Connect</label>
      </div>
      <div style={{ display: "flex" }}>
        <Checkbox
          inputId="method2"
          name="method"
          value="Delete"
          onChange={onMethodChange}
          checked={methods.indexOf("Delete") !== -1}
        />
        <label htmlFor="method2">Delete</label>
      </div>
      // Here I shortened the code, since it's just a list of methods
      <div onClick={toggleExpand}>Click me to collapse</div>
    </div>
  ) : (
    <div onClick={toggleExpand}>Click me to expand</div>
  );
}

下拉/关闭块

Dropdown / close block

javascript

css

reactjs