React，在select选项上获取数据属性

import React, { Component } from 'react';

class SelectComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        { label: 'Option 1', value: 'option1', dataAttribute: 'data1' },
        { label: 'Option 2', value: 'option2', dataAttribute: 'data2' },
        { label: 'Option 3', value: 'option3', dataAttribute: 'data3' }
      ],
      selectedOption: ''
    };
  }

  handleChange = (event) => {
    const selectedOption = event.target.value;
    const selectedDataAttribute = event.target.getAttribute('data-attribute');
    // 处理选项变更的逻辑
    this.setState({ selectedOption });
    console.log('Selected Data Attribute:', selectedDataAttribute);
  }

  render() {
    const { options, selectedOption } = this.state;

    return (
      <select value={selectedOption} onChange={this.handleChange}>
        {options.map((option, index) => (
          <option key={index} value={option.value} data-attribute={option.dataAttribute}>
            {option.label}
          </option>
        ))}
      </select>
    );
  }
}

export default SelectComponent;