reactjs - 如何在 ReactJS 中检索选择选项数据属性值？

Question

我一直在尝试不同的方法来从选择选项中检索数据属性值。我试过这些，但一切都归零。任何帮助表示赞赏。

handleChange(event) { 
    console.log("order by: ", event.target.attributes.getNamedItem('data-order'));
}


render() {

    var options = [];
    this.props.items.map((item) => {
        options.push(<option value={item.value} key={item.label} data-order={item.order}>{item.label}</option>);
     });

    return (
        <div>
            <label>Filter Single Select</label>
            <div>
                <select className="form-control" onChange={this.handleChange} value={this.props.sortBy}>
                    {options}
                </select>
            </div>
        </div>
    );
}

Answer 1

您的代码不起作用，因为 e.target正在返回整个选择字段而不是单个选项。您需要获取所选选项的索引，然后访问该自定义属性。在您的更改功能中，这将起作用:

event.target[event.target.selectedIndex].getAttribute('data-order')