如何下拉菜單列表

Question

我正在嘗試在 javascript 中創建一個下拉菜單，其中從 function 獲取所有狀態並顯示在下拉菜單中。 但是到目前為止，我的代碼顯示我的列表是錯誤的。 每個 state 都彼此相鄰，而不是在下拉菜單中。

菜單.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元素包裝在 map 中，請嘗試執行以下操作：

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

這樣您就可以動態呈現選項元素。

如何下拉菜單列表

問題描述

1 個解決方案

解決方案1
1 已采納 2022-04-29 03:39:03

如何下拉菜單列表

問題描述

1 個解決方案

解決方案1 1 已采納 2022-04-29 03:39:03

解決方案1
1 已采納 2022-04-29 03:39:03