React中调用getAttribute获取option的key属性返回null是什么原因？

问题原因 #

• React中的key是框架内部专用的保留属性，仅用于虚拟DOM的Diff运算优化，不会被渲染到真实DOM节点上，因此你无法在原生DOM元素上通过getAttribute获取到key的值，这是返回null的根本原因。

解决方案 #

有两种常用的实现方式：

方案1：使用自定义data属性存储需要传递的值 #

给option标签添加自定义的data-key属性，将key值存入该属性，再通过DOM API读取：

<select
  className={"select_1"}
  onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
    let startPaymentIn2 = { ...startPaymentIn };
    var selectedIndex = event.target.options.selectedIndex;
    startPaymentIn2["pricingOptionId"] = event.target.options[
      selectedIndex
    ].getAttribute("data-key");
    setStartPaymentIn(startPaymentIn2);
  }}
>
  {Object.entries(buyTicketData?.pricingOptions).map(([key, value]) => (
    <option key={key} data-key={key}>{value.name}</option>
  ))}
</select>

方案2：直接使用select原生的value属性（更推荐） #

将key值赋值给option的value属性，直接通过event.target.value读取选中值，代码更简洁，也符合表单元素的使用规范：

<select
  className={"select_1"}
  value={startPaymentIn.pricingOptionId} // 可选：添加该行实现受控组件
  onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
    setStartPaymentIn({
      ...startPaymentIn,
      pricingOptionId: event.target.value
    });
  }}
>
  {Object.entries(buyTicketData?.pricingOptions).map(([key, value]) => (
    <option key={key} value={key}>{value.name}</option>
  ))}
</select>

内容的提问来源于stack exchange，提问作者János