事件数据目标数据集键 returns 未定义

Question

我有一个过滤器，我可以按日期和答案对数据进行排序，起初我只是按日期过滤，所以我使用 data.target.value 并且可以正常工作，因为我已经添加了答案排序我不得不使用数据集，在这样做之后 data.target.dataset.dir & data.target.dataset.sort returns undefined

在一个子组件中，我有一个 select，SelectField 呈现带有样式组件的 select :

<SelectField 
    onChange={props.triCallback}
>
    <option data-sort="date" data-dir="desc">Filter by</option>
    <option data-sort="date" data-dir="asc">Date asc</option>
    <option data-sort="date" data-dir="desc">Date desc</option>
    <option data-sort="answers" data-dir="asc">Answers asc</option>
    <option data-sort="answers" data-dir="desc">Answers Desc</option>
</SelectField>

在我的 App.js 中，我有这个处理排序的方法：

constructor(props) {
    super(props);
    this.state = {
      sorting : 'date',
      sortDir : 'desc',
    };
}

onTriChanged = data => {
    const sorting = data.target.dataset.sort;
    const sortDir = data.target.dataset.dir;
    this.setState({
      sortDir: sortDir,
      sorting: sorting
    }, () => {
        this.fetchData()
    });
};

Answer 1

由于 <SelectField> 实际上在下面呈现原生 <select>，因此非常简单。 data.target.dataset... returns 未定义的原因是因为您要检索的那些 HTML5 data- 属性实际上驻留在选定的 <option> 元素上，而不是 <select> 元素，后者被 data.target.

引用

因此，您需要使用 selectedIndex property. The <select> element allows us to access the nested collection of <option> elements via the options property.

访问选择 <option> 元素

onTriChanged = data => {
    const selectedOption = data.target.options[data.target.selectedIndex];
    const sorting = selectedOption.dataset.sort;
    const sortDir = selectedOption.dataset.dir;
    this.setState({
      sortDir: sortDir,
      sorting: sorting
    }, () => {
        this.fetchData()
    });
};

事件数据目标数据集键 returns 未定义

Event data target dataset key returns undefined

javascript

frontend

reactjs