通过表单控件从父级获取验证器

import React from 'react';
import InputField from './InputField';

const FormContainer = () => {
  const validateEmail = (value) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(value) ? null : 'Invalid email address';
  };

  return (
    <form>
      <InputField label="Email" validator={validateEmail} />
      {/* 其他表单字段 */}
    </form>
  );
};

export default FormContainer;

import React from 'react';

const InputField = ({ label, validator }) => {
  const [value, setValue] = React.useState('');
  const [error, setError] = React.useState(null);

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
    const validationError = validator(inputValue);
    setError(validationError);
  };

  return (
    <div>
      <label>{label}</label>
      <input type="text" value={value} onChange={handleChange} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

export default InputField;