React开发中react-select组件required不生效，如何实现必选校验？

核心原因 #

原生浏览器表单的required校验仅对原生表单控件（<input>/<select>等）生效，react-select渲染的是自定义div结构的组件，哪怕直接传入required属性，该属性也不会被透传到参与原生表单校验的DOM节点上，因此无法触发默认校验逻辑。

以下方案完全适配现有代码逻辑，不需要引入第三方表单库改动原有实现：

适配方案 #

方案1：隐藏原生input作为校验载体（和原有原生input校验表现完全一致，无侵入） #

• 实现逻辑：在Select组件同级放置一个零尺寸透明的原生input，绑定Select的选中值状态，加上required属性，复用浏览器原生的校验能力，不改动现有提交逻辑
• 代码改造示例：

<form onSubmit={handleSubmit}>
  <input required placeholder="name" />
  {/* 新增：必选校验的隐藏载体 */}
  <input
    required
    value={data || ''}
    style={{
      position: 'absolute',
      opacity: 0,
      width: 0,
      height: 0,
      pointerEvents: 'none',
    }}
    tabIndex={-1}
  />
  <Select
    options={options}
    onChange={(e) => setData(e.value)}
    value={options.filter(option => option.value === data)}
    placeholder={"Select "}
    menuPlacement="top"
  />
  <button> Submit</button>
</form>

• 效果：当未选择下拉选项直接提交时，会和旁边的原生输入框一样弹出浏览器默认的必选提示，选择后自动通过校验，无额外交互成本。

方案2：提交阶段手动触发原生校验（无需长期挂载隐藏input） #

• 实现逻辑：改造原有的提交函数，在提交时先判断下拉值是否为空，手动创建临时校验节点触发原生校验，校验通过后再执行原有提交逻辑
• 代码改造示例：

const handleSubmit = (e) => {
  // 先阻止表单默认提交，走手动校验流程
  e.preventDefault();
  // 校验下拉是否已选
  if (!data) {
    // 临时创建原生校验节点，复用浏览器原生提示能力
    const tempValidInput = document.createElement('input');
    tempValidInput.required = true;
    tempValidInput.value = data || '';
    e.target.appendChild(tempValidInput);
    tempValidInput.reportValidity();
    e.target.removeChild(tempValidInput);
    return;
  }
  // 校验通过，执行原有逻辑
  console.log(data);
  // 触发表单实际提交
  e.target.submit();
}

常见无效操作提醒 #

• 不要直接给<Select>组件传入required属性，该属性不会被react-select透传到可被原生表单识别的DOM节点，属于无效传参，也是属性不生效的核心原因
• 校验用的隐藏input不要使用display: none设置隐藏，这类元素会被原生表单校验机制跳过，需要使用绝对定位+零尺寸+透明的方式，保证既不影响UI，又能被校验机制识别

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