如何下拉菜单列表

Question

我正在尝试在 javascript 中创建一个下拉菜单，其中从一个函数获取所有状态并显示在下拉菜单中。但是到目前为止，我的代码显示我的列表是错误的。每个州都彼此相邻，而不是在下拉菜单中。

menu.js


export default function DropDownMenu(props){
    if(!props.states) return
    return(
        <table>
            <body>
                {props.states.map(states=>
                <select>
                    <option>{states.state}</option>
                </select>)}
            </body>
        </table>
    )
}

正在显示的内容：

Answer 1

问题是您将 select 元素包裹在地图中，请尝试执行以下操作：

export default function DropDownMenu(props){
    if(!props.states) return
    return(
        <table>
            <body>
             // to select the value from option, just add the onChange listener
             <select onChange={(e) => { console.log(e.target.value) }}>
                {props.states.map(states=>
                  <option>{states.state}</option>
                )}
             </select>
            </body>
        </table>
    )
}

这样您就可以动态呈现选项元素。

如何下拉菜单列表

How to a drop down-down menu list

javascript

drop-down-menu

reactjs