ReactJS如何在渲染上获得<select>的第一个选项

Question

我想从选择列表中获取默认选项的数据属性.

我有这个:

<select className="form-control" id="select" onChange={(e) => state.selectedOptionValue(e)} value={state.selectedOption}>
   {data.map((option, i) => <Options key={i} option={option}/>)}
</select>

const Options = observer(({ state, option }) => (
  <option data-option-id={option.id} value={option.displayText}>
    {option.displayText}
  </option>
))

然后在我的状态文件中我有onChange处理程序:

async selectedOptionValue (e) {
   this.selectedOption = e.target.value
   this.optionId = e.target.options[e.target.selectedIndex].getAttribute('data-option-id');
}

到目前为止这工作正常,但我需要this.optionId默认设置,所以我必须data-options-id在渲染上获取第一个选项

我怎样才能做到这一点？