在Dropdown react-bootstrap中获取所选项目的值

Question

我想在下拉菜单中获取所选项目的值。我使用react-bootstrap。我尝试将onSelect={(e) => console.log(e)}放置在<Dropdown>，<Dropdown.Menu>和<Dropdown.Item>上，但是在选择一个国家/地区时，上述所有条件都使我无法使用。下拉菜单和项目正确显示。请帮助。

return (
    <div>
        <FormGroup className={styles.formControl}>
            <Dropdown >
                <Dropdown.Toggle variant="success" id="dropdown-basic">
                    Select a Country
                </Dropdown.Toggle>
                <Dropdown.Menu onSelect={(e) => console.log(e) } className={styles.dropdown_menu}>
                    {countries.map((country,i) => <Dropdown.Item key={i}>{country}</Dropdown.Item> )}
                </Dropdown.Menu>
            </Dropdown>
        </FormGroup>
    </div>
)

Answer 1

`const [selectedItem, setSelectedItem] = useState(null);
return (
    <div>
        <FormGroup className={styles.formControl}>
            <Dropdown >
                <Dropdown.Toggle variant="success" id="dropdown-basic">
                    {selectedItem?selectedItem:"Select a country"}
                </Dropdown.Toggle>
                <Dropdown.Menu  } className={styles.dropdown_menu}>
                    {countries.map((country, i) => <Dropdown.Item onSelect={()=>setSelectedItem(country)} key={i}>{country}</Dropdown.Item> )}
                </Dropdown.Menu>
            </Dropdown>
        </FormGroup>
    </div>
)`