Fatal编程技术网
  • javascript/
  • Javascript 反作用吊带下拉不适用于挂钩

Javascript 反作用吊带下拉不适用于挂钩

javascript reactjs

Javascript 反作用吊带下拉不适用于挂钩,javascript,reactjs,react-hooks,dropdown,Javascript,Reactjs,React Hooks,Dropdown,目标 通过挂钩动态创建下拉菜单 挑战 当我将挂钩值更改为下拉列表时，下拉列表不会打开或关闭。它一直关着。 当我硬编码返回中的下拉列表时，打开和关闭功能正确 使用挂钩不起作用 ///Various required imports are here.. export default function main(){ const [testb, state_set_testb] = useState(<div></div>); function toggle_d

目标

通过挂钩动态创建下拉菜单

挑战

当我将挂钩值更改为下拉列表时，下拉列表不会打开或关闭。它一直关着。 当我硬编码返回中的下拉列表时，打开和关闭功能正确

使用挂钩不起作用

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


///这里有各种必需的导入。。
导出默认函数main（）{
const[testb，state\u set\u testb]=useState（）；
功能切换\下拉\功能（切换\请求）{
log（“fffffffffffffffffffffffffffff”，切换请求）
状态设置下拉列表打开（切换请求）
}  
state_set_testb（toggle_dropdown_函数（true）}onMouseLeave={（）=>toggle_dropdown_函数（false）}>
奥瑟拉
一些行动
)
返回{testb}
}
工作时不使用挂钩

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


///这里有各种必需的导入。。
导出默认函数main（）{
功能切换\下拉\功能（切换\请求）{
log（“fffffffffffffffffffffffffffff”，切换请求）
状态设置下拉列表打开（切换请求）
}  
返回toggle_dropdown_函数（true）}onMouseLeave={（）=>toggle_dropdown_函数（false）}>
奥瑟拉
一些行动
}
以下是您如何完成此任务的方法。实际上，您有一个单独的组件，名为Dropdown，并将其推送到一个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'))

const{useState}=React；
常量下拉列表=（）=>{
const[active，setActive]=useState（'Select'）；
const[isOpen，setOpen]=使用状态（false）；
常量项=[“橙色”、“梨”、“苹果”]；
返回
setOpen（！isOpen）}className={“dropdown__header”}>{active}
{isOpen&&
{items.map（（项，索引）=>{
返回{
设置激活（项目）；
setOpen（假）；
}}>{item}
})}
}
} 
常量Main=（）=>{
常量[dropdowns，setDropdowns]=useState（[]）
常量添加下拉列表=（）=>{
让updatedDropdowns=[…dropdowns]；
updatedDropdowns.push（）
设置下拉列表（更新下拉列表）；
}
返回(
添加下拉列表
{dropdowns.map（（下拉列表，索引）=>{
返回{dropdown}
})}
)
}
ReactDOM.render（，document.getElementById（'app'））
这里有一些

更新

我设法用同样的方法使用reactstrap，我没有注意到任何问题。
这里是一个

这里是你如何完成它的。实际上，您有一个单独的组件，名为Dropdown，并将其推送到一个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'))

const{useState}=React；
常量下拉列表=（）=>{
const[active，setActive]=useState（'Select'）；
const[isOpen，setOpen]=使用状态（false）；
常量项=[“橙色”、“梨”、“苹果”]；
返回
setOpen（！isOpen）}className={“dropdown__header”}>{active}
{isOpen&&
{items.map（（项，索引）=>{
返回{
设置激活（项目）；
setOpen（假）；
}}>{item}
})}
}
} 
常量Main=（）=>{
常量[dropdowns，setDropdowns]=useState（[]）
常量添加下拉列表=（）=>{
让updatedDropdowns=[…dropdowns]；
updatedDropdowns.push（）
设置下拉列表（更新下拉列表）；
}
返回(
添加下拉列表
{dropdowns.map（（下拉列表，索引）=>{
返回{dropdown}
})}
)
}
ReactDOM.render（，document.getElementById（'app'））
这里有一些

更新

我设法用同样的方法使用reactstrap，我没有注意到任何问题。
下面是一个

为什么要在状态变量中放置React元素？这不是惯用的方法。如果不使用钩子，您将如何实现我的目标@Martin补充到我的目标中，主要组件将在下拉获取的数据准备好渲染之前加载很多。将获取下拉选项和下拉列表的数量。我知道如何通过钩子更改渲染的状态的唯一方法是。为什么要在状态变量中放置React元素？这不是惯用的方法。如果不使用钩子，您将如何实现我的目标@Martin补充到我的目标中，主要组件将在下拉获取的数据准备好渲染之前加载很多。将获取下拉选项和下拉列表的数量。我知道如何通过钩子更改渲染状态的唯一方法是。谢谢，不过这部分是有效的。当我在上面的代码中使用下拉组件时，它会重新渲染/激发constantly@RandomStuff我没有遇到过这个问题。我使用reactstrap库用一个新的代码笔更新了我的答案谢谢，不过这部分是可行的。当我在上面的代码中使用下拉组件时，它会重新渲染/激发constantly@RandomStuff我没有遇到过这个问题。我使用reactstrap库用一个新的代码笔更新了我的答案