单个HTML元素能否设置多个类value属性？React select多值获取方法

原生HTML的<option>元素只支持一个内置value属性作为选中时的提交值，不支持内置多个同类型value属性传值，可通过以下两种标准方案实现你的需求：

方案1：使用HTML标准自定义data属性（推荐） #

HTML原生支持data-*格式的自定义属性存储私有自定义数据，不会和原生属性冲突，语义清晰。
实现代码如下：

function Component(props) {
  const [message, setMessage] = useState({
    type: "",
    text: "",
  });

  return (
    <div>
       <select
        onChange={(ev) => {
          // 获取当前选中的option元素
          const currentOption = ev.target.selectedOptions[0];
          setMessage({ 
            // 通过dataset读取自定义的data-type属性值
            type: currentOption.dataset.type, 
            text: ev.target.value 
          });
        }}
        required
      >
        <option value="Ask a question" data-type="question">Question</option>
        <option value="Leave a comment" data-type="comment">Comment</option>
        <option value="Voice a concern" data-type="concern">Concern</option>
      </select>
    </div>
  );
}

export default Component;

方案2：结构化数据序列化存入value属性 #

如果需要关联的字段较多，可以把多组值序列化成JSON字符串存在value属性中，选中后反序列化直接使用，扩展性更强：

function Component(props) {
  const [message, setMessage] = useState({
    type: "",
    text: "",
  });

  return (
    <div>
       <select
        onChange={(ev) => {
          // 反序列化value里的结构化数据
          const selectedData = JSON.parse(ev.target.value);
          setMessage(selectedData);
        }}
        required
      >
        <option value={JSON.stringify({type: "question", text: "Ask a question"})}>Question</option>
        <option value={JSON.stringify({type: "comment", text: "Leave a comment"})}>Comment</option>
        <option value={JSON.stringify({type: "concern", text: "Voice a concern"})}>Concern</option>
      </select>
    </div>
  );
}

export default Component;

注意：不要给HTML元素添加非标准的自定义属性（比如直接写type="xxx"在option上），可能和元素未来的原生属性命名冲突，也不符合HTML规范。

内容的提问来源于stack exchange，提问作者Yehuda