React JS中表单Required必填校验功能不生效问题求助

核心失效原因 #

• react-admin 提供的校验规则（required/email）仅在官方内置的表单组件生态下生效，你当前使用自定义的FormContainer、Input组件没有接入react-admin的表单上下文，校验逻辑无法被触发
• 自定义的onChange、onSubmit点击事件覆盖了react-admin表单默认的状态收集、校验触发逻辑
• 校验函数不需要加括号执行，你写的required()会直接调用函数返回结果，而非把校验规则传递给表单组件
• 提交按钮未被包裹在表单组件内部，点击不会触发表单默认的校验流程

修正方案 #

1. 替换自定义表单容器为react-admin内置的SimpleForm组件，它会自动提供表单上下文，处理校验逻辑
2. 使用react-admin内置的TextInput、PasswordInput组件替代自定义Input，这些组件原生支持validate属性
3. 自定义提交逻辑直接传给SimpleForm的onSubmit属性即可，不要自行覆盖输入框的onChange和按钮的onClick事件
4. 校验函数直接传引用，不要加括号执行

修正后代码示例 #

import { required, email, SimpleForm, TextInput, PasswordInput, SaveButton } from 'react-admin';

export function Login(props) {
  const handleSubmit = (values) => {
    // values就是表单收集的{username, password}，在这里写你的登录提交逻辑
    console.log('表单值：', values)
  }

  return (
    <SimpleForm onSubmit={handleSubmit}>
      <TextInput
        type='email'
        className='form-control'
        placeholder='User name'
        source='username'
        validate={[required, email]}
      />
      <PasswordInput
        className='form-control'
        placeholder='Password'
        source='password'
        validate={[required]}
      />
      <SaveButton type='submit'>
        Signin
      </SaveButton>
    </SimpleForm>
  );
}

注意：react-admin的输入组件用source属性绑定字段名，不要用name属性

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