React中select的onChange事件获取option的dataset属性返回undefined如何解决

问题原因 #

• onChange事件触发时，data.target指向的是<select>元素（也就是你用的SelectField渲染后的根节点），不是你选中的<option>子元素，你把data-*自定义属性绑定在<option>上，当然从<select>的dataset里读不到对应值，所以返回undefined。
• 如果你用的封装版SelectField没有透传原生事件对象，返回的data甚至不是原生DOM事件，那连target属性对应的都不是真实DOM节点，更读不到dataset。

修复方案 #

推荐两种兼容度高的修复方式：

方案1：读取选中的option元素（仅适用于SelectField透传原生事件的场景） #

不用改现有DOM结构，只要修改事件处理逻辑，从select的options列表里拿到当前选中的option节点再读dataset：

onTriChanged = e => {
    // 取当前选中项的索引
    const selectedIdx = e.target.selectedIndex;
    // 取对应option节点
    const selectedOption = e.target.options[selectedIdx];
    const sorting = selectedOption.dataset.sort;
    const sortDir = selectedOption.dataset.dir;
    this.setState({
      sortDir,
      sorting
    }, this.fetchData);
};

方案2：把排序参数塞到option的value中（兼容性最好，适配所有封装类下拉组件） #

直接把排序相关的参数序列化后放到option的value属性里，不用操作DOM读自定义属性，逻辑更简单：
第一步修改option结构：

<SelectField 
    onChange={props.triCallback}
>
    <option value={JSON.stringify({sort:"date", dir:"desc"})}>Filter by</option>
    <option value={JSON.stringify({sort:"date", dir:"asc"})}>Date asc</option>
    <option value={JSON.stringify({sort:"date", dir:"desc"})}>Date desc</option>
    <option value={JSON.stringify({sort:"answers", dir:"asc"})}>Answers asc</option>
    <option value={JSON.stringify({sort:"answers", dir:"desc"})}>Answers Desc</option>
</SelectField>

第二步修改事件处理逻辑，反序列化拿到参数：

onTriChanged = e => {
    const { sort: sorting, dir: sortDir } = JSON.parse(e.target.value);
    this.setState({
      sortDir,
      sorting
    }, this.fetchData);
};

如果你的SelectField封装后onChange直接返回选中的value而不是事件对象，把上面代码里的e.target.value换成回调拿到的参数即可。

内容的提问来源于stack exchange，提问作者Elichy