ReactJS受控选择框校验：未选选项时如何提示必填错误

我来给你一步步拆解怎么实现这个必填校验，让用户没选择选项时能看到清晰的错误提示：

1. 先给组件加个状态存错误信息 #

不管你用的是类组件还是函数组件，都需要一个状态来管理选择框的错误提示文本，同时别忘了把选择框的值绑定到状态（受控组件的核心要求）。

类组件写法： #

constructor(props) {
  super(props);
  this.state = {
    destination: '', // 绑定选择框的选中值
    destinationError: '' // 用来存储错误提示的状态
  };
}

函数组件（Hook）写法： #

import { useState } from 'react';

// 组件内部
const [destination, setDestination] = useState('');
const [destinationError, setDestinationError] = useState('');

2. 编写校验逻辑 #

你可以选两种校验时机：实时校验（用户选择时就检查），或者提交表单时统一校验，按需选择即可。

选项一：提交表单时校验 #

假设你有表单提交方法，就在提交前做校验拦截：

// 类组件示例
handleSubmit = (e) => {
  e.preventDefault();
  const { destination } = this.state;

  // 检查是否未选择有效选项
  if (!destination) {
    // 设置错误提示，优先用你的translations文案，没有就用默认提示
    this.setState({ 
      destinationError: translations.required_field || '该字段为必填项' 
    });
    return; // 校验不通过，终止后续提交逻辑
  }

  // 校验通过，清空错误信息，执行提交逻辑
  this.setState({ destinationError: '' });
  // ...这里写你的表单提交代码，比如发请求到后端
}

// 函数组件示例
const handleSubmit = (e) => {
  e.preventDefault();
  if (!destination) {
    setDestinationError(translations.required_field || '该字段为必填项');
    return;
  }
  setDestinationError('');
  // ...提交逻辑
}

选项二：实时校验（用户选择时就检查） #

修改你的handleDestination方法，在更新选择值的同时完成校验：

// 类组件示例
handleDestination = (e) => {
  const selectedValue = e.target.value;
  this.setState({
    destination: selectedValue,
    // 选了有效选项就清空错误，没选就设置提示
    destinationError: selectedValue ? '' : translations.required_field || '该字段为必填项'
  });
}

// 函数组件示例
const handleDestination = (e) => {
  const selectedValue = e.target.value;
  setDestination(selectedValue);
  setDestinationError(selectedValue ? '' : translations.required_field || '该字段为必填项');
}

3. 渲染错误提示到页面 #

把错误信息显示在选择框下方，同时给选择框加错误样式，让用户一眼就能注意到：

<select 
  name="destination" 
  // 通过类名控制错误样式，比如用Bootstrap的is-invalid，或者自定义类
  className={`form-control ${destinationError ? 'is-invalid' : ''}`} 
  onChange={this.handleDestination}
  value={this.state.destination} // 受控组件必须绑定value到状态！
>
  <option value=""> - { translations.destination_town } -</option>
  { destinationTowns.map( (town, index) => (
    <option key={ index } value={ town.id }>{ town.name }</option>
  )) }
</select>

// 只有当存在错误信息时才渲染提示
{destinationError && (
  <div style={{ color: 'red', marginTop: '4px' }}>
    {destinationError}
  </div>
)}

如果用Bootstrap框架，搭配invalid-feedback类的提示效果会更规范：

{destinationError && (
  <div className="invalid-feedback">
    {destinationError}
  </div>
)}

小优化：提升用户体验 #

校验不通过时，可以自动把焦点定位到选择框，让用户更快修正：

// 类组件提交方法中添加
if (!destination) {
  this.setState({ destinationError: translations.required_field || '该字段为必填项' }, () => {
    document.querySelector('select[name="destination"]').focus();
  });
  return;
}

// 函数组件提交方法中添加
if (!destination) {
  setDestinationError(translations.required_field || '该字段为必填项');
  setTimeout(() => {
    document.querySelector('select[name="destination"]').focus();
  }, 0);
  return;
}

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