反应自定义钩子 - 继承

Question

我知道 react 钩子的全部意义在于摆脱基于类的组件并提升功能组件。 但是，是否可以在反应钩子中实现继承？

例如，在这里，我创建了两个钩子。1. 使用电子邮件格式验证器，验证输入(更改(是否为有效的电子邮件格式。2. useEmailSignupValidator继承了useEmailFormatValidator，但扩展了它在(onBlur(事件发生时验证用户是否可以使用用户名的功能。

这些重点是useEmailFormatValidator可以在登录形式中使用，而useEmailSignupValidator可以在注册形式中使用。

下面是我的代码

使用电子邮件格式验证器

import { useState } from 'react';
export const useEmailFormatValidator = () => {
  const [value, setValue] = useState('');
  const [validity, setValidity] = useState(false);
  const regex = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
  const inputChangeHandler = event => {
    setValue(event.target.value.trim());
    if (regex.test(String(event.target.value.trim()).toLowerCase())) {
      setValidity(true);
    } else {
      setValidity(false);
    }
  };
  return { value: value, onChange: inputChangeHandler, validity };
};

使用电子邮件注册验证器

import { useState } from 'react';
import { useEmailFormatValidator } from "../auth";
export const useEmailSignupValidator = () => {
  const [value, setValue] = useState('');
  const [validity, setValidity] = useState(false);
  const emailFormatValidator = useEmailFormatValidator();
  const inputChangeHandler = event => {
    emailFormatValidator.onChange(event);
    setValue(emailFormatValidator.value);
    setValidity(emailFormatValidator.validity);
  };
  const verifyUserNameExists = event => {
    // Verify username is availble in back-end.
  };
  return { value: value, onChange: inputChangeHandler, onBlur: verifyUserNameExists, validity };
};

当我运行测试时，下面的测试无法按预期工作，并且未定义"值"和"有效性"。

 const inputChangeHandler = event => {
    emailFormatValidator.onChange(event);
    setValue(emailFormatValidator.value);
    setValidity(emailFormatValidator.validity);
  };

无论如何，在自定义钩子中是否有继承？ 或者你如何重用代码，其中 react 钩子的目的是？

Answer 1

恕

我直言，这不是一个真正的自定义钩子。为什么不做这样的事情呢？

const isValidEmail = email => {
    const regex = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return regex.test(email);
};
const MyComponent = () => {
    const [inputVal, setInputVal] = useState('');
    return(
        <div>
            <input 
                type='text'
                name='my-input'
                onChange={e => {
                    const email = e.target.value;
                    if(isValidEmail(email)){
                        setInputVal(email);
                    }else{
                        alert('invalid email')
                    }
                }}
            />
        </div>
    )
}