如何從React中選項標簽上的自定義屬性中檢索數據

Question

我有一個帶有select下拉菜單的表單，該下拉菜單包含通過循環對象構建的選項。 每個選項都有一個關聯的value屬性和一個自定義屬性data 。

我可以很好地檢索該value ，但無法訪問data屬性。 我嘗試遵循此處找到的JavaScript模式，但無濟於事。 返回的值是undefined 。

這是具有以下形式的組件：

import React from 'react';
import Option from './Option';

class AddmenuItemForm extends React.Component {
  createMenuItemTest(event) {
    event.preventDefault();

    const menuItem = {
      subsectionObjectId: this.subsectionObjectId.value,
      orderIndex: this.subsectionObjectId.selectedIndex.data,
    }

    this.props.addMenuItem(menuItem);

    this.menuItemForm.reset();
  }

  render() {
    const { subsections } = this.props;

    return (
      <div>
        <form ref={(input) => this.menuItemForm = input} onSubmit={(e) => this.createMenuItemTest(e)}>
          <select
            ref={(input) => this.subsectionObjectId = input}
            className="input mtm">
            {
              Object
                .keys(subsections)
                .map(key => <Option key={key} id={key} details={subsections[key]} />)
            }
          </select>

          <button type="submit">Add New</button>
        </form>
      </div>
    );
  }
};

export default AddmenuItemForm;

這是選項組件：

import React from 'react';

class Option extends React.Component {
  render() {
    const { details } = this.props;
    const key = this.props.id;

    return (
      <option value={key} data={details.numberMenuItems}>
        {details.name}
      </option>
    )
  }
}

export default Option;

渲染的HTML如下所示（ <select>部分）：

<select>
  <option value="KhEncads5F" data="11">Lunch</option>
  <option value="rxGeTpqSDF" data="2">Dinner</option>
</select>

有沒有辦法在選定的<option>標記上檢索額外的信息？

Answer 1

使用您對DOM元素的ref ，您可以訪問和和selectedOptions ：

this.subsectionObjectId.selectedOptions[0].getAttribute('data-items')

檢查以下工作示例：
https://jsfiddle.net/1rmftx4z/