React：父组件触发子组件状态变更，重置输入框验证信息

方案1：将验证状态统一提升到父组件 #

把原本存在子组件本地的validationMessage状态移到父组件管理，这样父组件执行重置时可以同时清空所有验证消息，逻辑更统一。

父组件修改后代码 #

const AdvancedSearch: FC<SearchProps> = memo(_props => {
  const [fields, setFields] = useState(data.initialFieldValues);
  // 新增验证消息状态，对应每个子输入组件
  const [validationMessages, setValidationMessages] = useState<Record<string, string | undefined>>({
    field1: undefined,
    field2: undefined,
    field3: undefined
  });

  const resetFields = () => {
    setFields(data.initialFieldValues);
    // 同步重置所有验证消息
    setValidationMessages({
      field1: undefined,
      field2: undefined,
      field3: undefined
    });
  };

  // 统一处理子组件的输入变更，同时更新值和验证状态
  const handleTextFieldChange = (fieldName: string, value: string) => {
    setFields(prev => ({ ...prev, [fieldName]: value }));
    const error = validateNumericInput(value);
    setValidationMessages(prev => ({ ...prev, [fieldName]: error }));
  };

  return (
    <React.Fragment>
      <TextField
        foo={fields.field1}
        onChange={(e) => handleTextFieldChange('field1', e.currentTarget.value)}
        validationMessage={validationMessages.field1}
      />
      <TextField
        foo={fields.field2}
        onChange={(e) => handleTextFieldChange('field2', e.currentTarget.value)}
        validationMessage={validationMessages.field2}
      />
      <TextField
        foo={fields.field3}
        onChange={(e) => handleTextFieldChange('field3', e.currentTarget.value)}
        validationMessage={validationMessages.field3}
      />
    </React.Fragment>
  );
});

子组件修改后代码 #

// 调整Props类型，新增验证消息和变更回调
export type TextFieldProps = {
  foo: string;
  placeholder?: string;
  maxLength?: number;
  onChange: (e: React.FormEvent<HTMLInputElement>) => void;
  validationMessage?: string;
};

const TextField: FC<TextFieldProps> = memo(props => {
  // 移除本地的validationMessage状态，直接使用父组件传入的值
  return (
    <InputText
      value={props.foo}
      placeholder={props.placeholder}
      maxLength={props.maxLength}
      onChange={props.onChange}
      className={props.validationMessage ? `${classes.invalid}` : ''}
    />
  );
});

方案2：子组件监听Props变化自动重置验证状态 #

如果不想改动状态管理结构，让子组件监听输入值foo的变化，当值被重置为初始状态（比如空字符串）时，自动清除本地的验证消息。

子组件修改后代码 #

// 修正Props类型，新增值变更回调（原代码直接修改props.foo是错误的，必须通过回调通知父组件）
export type TextFieldProps = {
  foo: string;
  placeholder?: string;
  maxLength?: number;
  onChange: (value: string) => void;
};

const TextField: FC<TextFieldProps> = memo(props => {
  const [validationMessage, setValidationMessage] = useState<string | undefined>(undefined);

  // 监听foo的变化，当回到初始值时重置验证消息
  useEffect(() => {
    // 这里假设初始值为空字符串，可根据实际情况调整判断条件
    if (props.foo === '') {
      setValidationMessage(undefined);
    }
  }, [props.foo]);

  const onTextChange = (e: React.FormEvent<HTMLInputElement>) => {
    const input = e.currentTarget.value;
    // 通过回调通知父组件更新值
    props.onChange(input);
    const error = validateNumericInput(input);
    setValidationMessage(error);
  };

  return (
    <InputText
      value={props.foo}
      placeholder={props.placeholder}
      maxLength={props.maxLength}
      onChange={onTextChange}
      className={validationMessage ? `${classes.invalid}` : ''}
    />
  );
});

父组件对应调整 #

父组件只需确保resetFields正确设置初始值，子组件会自动监听并重置验证状态：

const resetFields = () => {
  setFields(data.initialFieldValues);
};

// 渲染子组件时传入onChange回调
<TextField
  foo={fields.field1}
  onChange={(value) => setFields(prev => ({ ...prev, field1: value }))}
/>

方案3：通过Ref调用子组件的重置方法 #

如果子组件逻辑复杂，可通过Ref暴露重置方法，父组件直接调用子组件的方法清空验证消息。

子组件修改后代码 #

// 定义子组件Ref的类型
export type TextFieldRef = {
  resetValidation: () => void;
};

// 使用forwardRef暴露重置方法
const TextField = memo(forwardRef<TextFieldRef, TextFieldProps>((props, ref) => {
  const [validationMessage, setValidationMessage] = useState<string | undefined>(undefined);

  // 定义重置验证消息的方法
  const resetValidation = () => {
    setValidationMessage(undefined);
  };

  // 向父组件暴露方法
  useImperativeHandle(ref, () => ({
    resetValidation
  }));

  const onTextChange = (e: React.FormEvent<HTMLInputElement>) => {
    const input = e.currentTarget.value;
    props.onChange(input);
    const error = validateNumericInput(input);
    setValidationMessage(error);
  };

  return (
    <InputText
      value={props.foo}
      placeholder={props.placeholder}
      maxLength={props.maxLength}
      onChange={onTextChange}
      className={validationMessage ? `${classes.invalid}` : ''}
    />
  );
}));

// Props类型
export type TextFieldProps = {
  foo: string;
  placeholder?: string;
  maxLength?: number;
  onChange: (value: string) => void;
};

父组件修改后代码 #

const AdvancedSearch: FC<SearchProps> = memo(_props => {
  const [fields, setFields] = useState(data.initialFieldValues);
  // 创建Ref数组存储每个子组件的实例
  const textFieldRefs = useRef<(TextFieldRef | null)[]>([]);

  const resetFields = () => {
    setFields(data.initialFieldValues);
    // 遍历调用每个子组件的重置方法
    textFieldRefs.current.forEach(ref => {
      ref?.resetValidation();
    });
  };

  return (
    <React.Fragment>
      <TextField
        foo={fields.field1}
        onChange={(value) => setFields(prev => ({ ...prev, field1: value }))}
        ref={el => textFieldRefs.current[0] = el}
      />
      <TextField
        foo={fields.field2}
        onChange={(value) => setFields(prev => ({ ...prev, field2: value }))}
        ref={el => textFieldRefs.current[1] = el}
      />
      <TextField
        foo={fields.field3}
        onChange={(value) => setFields(prev => ({ ...prev, field3: value }))}
        ref={el => textFieldRefs.current[2] = el}
      />
    </React.Fragment>
  );
});

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