react中表格校验必填

在React中实现表格字段的必填校验，通常我们会结合表单组件和状态管理（如Redux、Context API 或者 useState）。下面是一个基本步骤：

1. **状态管理**：创建一个状态来跟踪每个表单字段的值和验证状态。可以是一个对象，其中包含每个字段名和对应的值以及验证标志。

const [formData, setFormData] = React.useState({
  field1: '',
  field2: '',
  // 其他字段...
  isFormValid: true,
});

2. **表单组件**：对于每个表单字段，创建一个输入组件，并添加`onChange`事件处理函数，更新状态。同时，当字段失去焦点时（例如，用户点击其他元素），检查该字段是否为空。

function TableCell({ label, name, required }) {
  const handleChange = (e) => {
    setFormData(prevState => ({
      ...prevState,
      [name]: e.target.value,
      isFormValid: !required || formData[name].trim() !== '',
    }));
  };

  return (
    <div>
      {label}
      <input type="text" value={formData[name]} onChange={handleChange} required={required} />
      {required && !formData[name] && <span className="error">此项必填</span>}
    </div>
  );
}

3. **全局校验**：在提交表单前，遍历`formData`，检查所有必填字段，如果发现有空的则将`isFormValid`设置为`false`。

const handleSubmit = () => {
  if (!formData.isFormValid) {
    alert('请填写所有必填字段');
    return;
  }
  // 提交表单数据...
};

4. **样式提示**：可以根据需要调整错误消息的显示样式，比如使用CSS类名给未填写项添加样式。

记得在实际项目中，还可以考虑使用一些库，如formik或yup，它们提供了更丰富的表单管理和验证功能。