在模态 window 中添加元素

Question

我正在用 React 编写一个单页网站。目前我有一个过滤器 window，使用帮助模式 window 实现，它包含四个类别，看起来像这样：

这些类别是使用下拉列表实现的，即打开时会出现复选框。但这对用户来说并不清楚，我想修复它。在下图中，我用绿色给出了所需的实现：

由于我已经为单独的文件实现了每个类别，所以我仅针对类别 - 日期给出了我的代码示例。请告诉我如何实现它。

    function FilterDate() {
    const [isExpanded, setIsExpanded] = useState(false);

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

    const collapse = () => {
        setIsExpanded(false)
    }
    const expand = () => {
        setIsExpanded(true)
    }


    const [state, setState] = useState([
        {
            startDate: new Date(),
            endDate: null,
            key: "selection"
        }
    ]);
    return isExpanded ? (
        <div>
            <div onClick={toggleExpand}><h6>Date</h6></div>
            <DateRange
                onChange={item => setState([item.selection])}
                moveRangeOnFirstSelection={false}
                ranges={state}
            />
        </div>
    )
        : (
            <div onClick={toggleExpand}><h6>Date</h6></div>
        );
}

export default FilterDate;

Answer 1

首先，更改 return，使 div 不再重复。

return <>
  <div onClick={toggleExpand}><h6>Date</h6></div>

  {
    isExpanded && <div>
      <DateRange
        onChange={item => setState([item.selection])}
        moveRangeOnFirstSelection={false}
        ranges={state}/>
    </div>
  }
</>

向 div 添加 class，并使用 CSS 添加边框顶部和边框底部：

<div className="item-toggle" onClick={toggleExpand}><h6>Date</h6></div>

.item-toggle {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

关于箭头，你可以在Material Icons中找到一个，然后将其添加到div中，例如：

<div className="item-toggle" onClick={toggleExpand}>
  <h6>Date</h6>

  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
</div>

在模态 window 中添加元素

Add elements in modal window

javascript

reactjs