Question

使用以下代码，我正在渲染一个带有一些颜色下拉列表的表格。当颜色下拉列表中的一个发生更改时，我想获取已更改的下拉列表的ID。

有什么建议吗？

handleColorChange(e, key) {
    console.log(key) // logs the orange/blue/black

}

renderDropdown(color, myId) {
    const statuses = ["orange", "blue", "black"];
    const menuItems = statuses.map((option, index) =>
        <MenuItem
            key={index}
            id={`type-${option}`}
            eventKey={option}
            active={option === color}
        >
            {option}
        </MenuItem>,
    );

    return (
        <Dropdown id={myId} bsStyle="primary" onSelect={(e, key) => this.handleColorChange(e, key)}>
            <Dropdown.Toggle>
                {status}
            </Dropdown.Toggle>
            <Dropdown.Menu>
                {menuItems}
            </Dropdown.Menu>
        </Dropdown>
    );
}

renderDropdown(orange, 1);
renderDropdown(blue, 2);

Answer 1

您可以将任何内容传递给handleColorChange，对于您来说，您已经可以访问myId。将其传递给函数，您就可以开始使用了！

e => this.handleColorChange(e,myId)

在React中，当下拉列表值更改时如何获取下拉列表的ID？

1 个答案: