如何不使用hook实现React Select下拉列表提交非空校验

完全不需要依赖react-hook相关的表单库，只用React类组件自带的状态管理就能实现提交时的非空校验，具体实现步骤如下：

• 首先补全组件状态，新增错误提示字段
  原来的状态只存了下拉选中值，需要新增字段存储校验报错信息，初始化代码：

  state = {
    option: '', // 下拉选中值，初始设为空字符串即可
    selectError: '' // 校验错误提示文案
  }
  

• 修正下拉选值的change逻辑，补全组件属性
  你原来的handleChange方法没写闭合，同时要注意给每个MenuItem配置对应的value属性（不然拿不到选中值），选值时同步清空之前的错误提示，修正后的代码：

  handleChange = (event) => {
    this.setState({
      option: event.target.value,
      selectError: '' // 用户重新选值时清空之前的报错
    })
  }
  
  // Select组件渲染部分
  <Select
    onChange={this.handleChange}
    value={this.state.option}
    error={Boolean(this.state.selectError)} // 校验不通过时展示组件错误样式
  >
    <MenuItem value="test1">test1</MenuItem>
    <MenuItem value="test2">test2</MenuItem>
  </Select>
  {/* 错误提示，有报错时才渲染 */}
  {this.state.selectError && <span style={{color: '#f5222d', fontSize: 12}}>{this.state.selectError}</span>}
  

• 在提交函数中加入非空校验逻辑
  点击提交时先判断选中值是否为空，为空则设置错误提示、阻断后续提交逻辑，校验通过再执行业务提交代码：

  OnClickSubmit = (event) => {
    event.preventDefault()
    // 非空校验，去掉首尾空格后判断
    if (!this.state.option?.trim()) {
      this.setState({
        selectError: '请选择下拉选项'
      })
      return // 直接返回，不执行后续提交逻辑
    }
  
    // 校验通过，写你的实际提交逻辑，比如接口请求、数据上报等
    console.log('提交成功，选中值为：', this.state.option)
  }
  

注意：如果要加“请选择”这类默认占位选项，把它的value设为空字符串即可，不要用null或者undefined，避免非空判断出现边界问题。

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