如何在ExtReact中点击按钮时校验表单必填字段是否合法

你可以通过两种方式实现点击提交按钮触发必填校验的效果：

方案1：单独校验单个TextField（适用单字段场景） #

通过ref获取TextField组件实例，提交时主动调用validate()方法触发校验：

import { useRef } from 'react';
import { TextField, Button } from '@sencha/ext-react-modern';

function YourComponent() {
  // 声明ref绑定TextField组件
  const textFieldRef = useRef(null);

  const handleClick = () => {
    // 主动触发校验，返回值为是否校验通过
    const isFieldValid = textFieldRef.current.validate();
    if (!isFieldValid) return;
    // 校验通过后执行提交逻辑
  }

  const handleChaneValue = (e) => {
    // 你原有字段值处理逻辑
  }

  return (
    <>
      <TextField
        ref={textFieldRef}
        required
        label="Required Field"
        requiredMessage="This field is required."
        errorTarget="under"
        name="field"
        onChange={(e) => handleChaneValue(e)}
      />
      <Button 
        ui="confirm" 
        text="BTN submit" 
        handler={handleClick} 
        style={{border: '1px solid black'}}
      />
    </>
  )
}

方案2：用FormPanel包裹批量校验（适用多表单字段场景） #

如果后续还有其他表单字段，可以用FormPanel统一管理，一次调用校验所有字段：

import { useRef } from 'react';
import { FormPanel, TextField, Button } from '@sencha/ext-react-modern';

function YourComponent() {
  const formRef = useRef(null);

  const handleClick = () => {
    // 校验表单内所有字段
    const isFormValid = formRef.current.validate();
    if (!isFormValid) return;
    // 可直接获取所有表单字段值
    const formValues = formRef.current.getValues();
    // 执行提交逻辑
  }

  const handleChaneValue = (e) => {
    // 你原有字段值处理逻辑
  }

  return (
    <FormPanel ref={formRef}>
      <TextField
        required
        label="Required Field"
        requiredMessage="This field is required."
        errorTarget="under"
        name="field"
        onChange={(e) => handleChaneValue(e)}
      />
      <Button 
        ui="confirm" 
        text="BTN submit" 
        handler={handleClick} 
        style={{border: '1px solid black'}}
      />
    </FormPanel>
  )
}

调用validate()方法后，组件会自动按照你配置的errorTarget="under"在输入框下方展示对应的必填错误提示，符合你预期的效果。另外注意你原有代码中handleChaneValue的拼写，如果是笔误建议修正为handleChangeValue避免运行报错。

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