Reactstrap 下拉菜单不适用于钩子

Question

目标

通过钩子动态创建下拉菜单。

---

挑战

当我将挂钩值更改为下拉菜单时，下拉菜单不会打开或关闭。它保持关闭状态。 当我在返回中硬编码下拉菜单时，打开和关闭功能正确。

---

不起作用使用钩子

///Various required imports are here..


export default  function main(){
 const [testb, state_set_testb] = useState(<div></div>);

function toggle_dropdown_function(toggle_request) {
console.log("fffffffffffffffffffffff",toggle_request)
    state_set_dropdown_open(toggle_request)
  }  

 state_set_testb(<div onMouseEnter={() => toggle_dropdown_function(true)} onMouseLeave={() => toggle_dropdown_function(false)}>
  <Dropdown id="testa" isOpen={dropdownOpen} toggle={toggle_dropdown}>
    <DropdownToggle style={{ backgroundColor: "transparent", border: "none", paddingTop: '8px', paddingBottom: '8px', paddingleft: '10px', paddingRight: '10px', color: "grey", fontSize: "14px " }}
      color="light" >
      othera
      </DropdownToggle >
    <DropdownMenu  >
      <DropdownItem style={{ fontSize: "14px " }}>Some Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>
  </div>)

return <div>{testb}</div>
}

---

有效不使用钩子

///Various required imports are here..


export default  function main(){

function toggle_dropdown_function(toggle_request) {
console.log("fffffffffffffffffffffff",toggle_request)
    state_set_dropdown_open(toggle_request)
  }  

return <div onMouseEnter={() => toggle_dropdown_function(true)} onMouseLeave={() => toggle_dropdown_function(false)}>
  <Dropdown id="testa" isOpen={dropdownOpen} toggle={toggle_dropdown}>
    <DropdownToggle style={{ backgroundColor: "transparent", border: "none", paddingTop: '8px', paddingBottom: '8px', paddingleft: '10px', paddingRight: '10px', color: "grey", fontSize: "14px " }}
      color="light" >
      othera
      </DropdownToggle >
    <DropdownMenu  >
      <DropdownItem style={{ fontSize: "14px " }}>Some Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>
  </div>
}

Answer 1

您可以通过以下方式完成它。本质上，您有一个名为 Dropdown 的单独组件，并将其推送到下拉列表中。

const { useState } = React;

const Dropdown = () => {
  const [active, setActive] = useState('Select');
  const [isOpen, setOpen] = useState(false);
  const items = ["orange", "pear", "apple"];
  return <div className={`dropdown`}>
    <div onClick={()=> setOpen(!isOpen)} className={"dropdown__header"} >{active}</div >
    {isOpen && 
    <div className={"dropdown__body"}>
      {items.map((item, index) => {
        return <div key={index} onClick={(e) =>  {
            setActive(item);
            setOpen(false);
          }}>{item}</div>
      })}
    </div>
     }
    </div>
} 


const Main = () => {
  const [dropdowns, setDropdowns] = useState([])
  const addDropdowns = () => {
    let updatedDropdowns = [...dropdowns];
    updatedDropdowns.push(<Dropdown />)
    setDropdowns(updatedDropdowns);
  }
  
  return (
    <div className={"main"}>
      <button onClick={addDropdowns}>
        Add Dropdown
      </button>
      {dropdowns.map((dropdown, index) => {
        return <div key={index}>{dropdown}</div>
       })}
    </div>
  )
}

ReactDOM.render(<Main />, document.getElementById('app'))

这里有一些codepen。

更新

我设法使用相同的方法使用 reactstrap，但没有发现任何问题。 这是codepen