Выставить функцию из функционального компонента - React

Question

У меня есть функциональный компонент Form. Мне нужно выставить из нее функцию validate.

При проверке обычно используются переменные состояния внутри формы.

Теперь я не могу придумать, как это можно сделать, чтобы какой бы компонент не использовал form, он может просто проверять форму, как показано ниже

 const { validateForm } = Form;
 const isFormValid = validateForm();

При условии, что моя форма выглядит следующим образом

const Form = () => {
    const isError = () => {}
    const isEmpty = () => {}
    const validate = () => {
        return isError() || isEmpty();
    }
}

Есть ли способ сделать это с помощью хуков ? В данный момент я не могу просто разобраться в этом.

PS - Я полностью понимаю, что это нарушает философию декларативного и является императивным способом, но есть случаи использования, где это требуется. Особенно когда люди выставляют это через библиотеки. Ant design тоже это делает - https://ant.design/components/form/

Так что я в полном порядке.

Answer 1

Да, вы можете сделать это, комбинируя useRef и useImperativeHandle, выполнив следующее:

• Ваш Form должен переадресовать ссылку с использованием React.forwardRef.

const MyForm = React.forwardRef((props, ref) => {

• Объявите проверку формы внутри компонента формы, используя хук useImperativeHandle следующим образом:

  React.useImperativeHandle(ref, () => ({
    validate: () => {
      alert("now, the form is validating");
    }
  }));

• В форме родитель, создайте ссылку и передайте ее в вашу форму <MyForm ref={formRef} />

Тогда в вашем случае просто используйте formRef.current.validate();

Пожалуйста, найдите демо в this codesandbox