[Material UI] Select Field の各 MenuItem にカスタムデータ属性をセットする方法

ニッチですが…
いわゆる data-* を設定したい時の方法です。

dataSet の設定

html に設定するのと同じようにセット。

  render() {
    return (
      <div>
        <SelectField
          floatingLabelText="Frequency"
          value={this.state.value}
          onChange={this.handleChange}
        >
          <MenuItem value={1} primaryText="Never" data-v={example} />
          <MenuItem value={2} primaryText="Every Night" data-v={example} />
          <MenuItem value={3} primaryText="Weeknights" data-v={example} />
          <MenuItem value={4} primaryText="Weekends" data-v={example} />
          <MenuItem value={5} primaryText="Weekly" data-v={example} />
        </SelectField>
      </div>
    );
  }

dataSet の取得

取得は event から親要素を辿っていくことになる。

  handleChange(event, index, value) {
    const dataSet = event.target.parentElement.parentElement.parentElement.dataset.id != undefined ? event.target.parentElement.parentElement.parentElement.dataset : event.target.parentElement.parentElement.dataset;

    console.log(dataSet.v)
  }

event から dataSet を取得するさいの注意点

option 部分にはこのように padding が設定されており、 padding 部分をクリックされると event で渡される要素が一つ上の要素にズレる。