Чтобы подключить библиотеку, необходимо модифицировать ваш store:
- Подключить
formControllerReducer
import { formControllerReducer } from 'react-redux-hook-form';
const combinedReducer = combineReducers({
formController: formControllerReducer, // подключение formControllerReducer
user: userReducer,
contact: contactReducer,
});
- Записать функцию
getState
в window
window.getState = () => store.getState()
-
useForm
&&WrapperForm
WrapperForm
- обертка в которую должна быть обернута форма
useForm
- хук для инициализации формы
Пример:
export const Login:FC = memo( () => {
const form = useForm({name: 'login'})
return (
<WrapperForm form={form} onSubmit={(data:ILogin) => {User.options.login(data)}}>
<InputTitleStyled>Номер телефона</InputTitleStyled>
<PhoneInput name={'username'} required/>
<InputTitleStyled>Пароль</InputTitleStyled>
<PasswordInput name={'password'} required/>
<SubmitButton text={'Авторизироваться'}/>
</WrapperForm>
)
})
-
useField
useField
- используется для инициализации поля формы
Из useField достаем следующие хукиuseData
,useIsValidate
,useIsTouch
,useMessageError
Работают по принципуuseState
!Если хотите самостоятельно менять messageError isValidate isTouch рекомендуется отключить стандартное поведение useField.
для этого необходимо передать вuseField
isDisableAuto: true
Пример:
interface IEmail {
name: string;
required?: boolean;
}
export const EmailInput: FC<IEmail> = (props) => {
const {useData, useIsValidate, useIsTouch, useMessageError} = useField({
name: props.name,
isRequired: props.required,
validateFunction: (value:string) => validate(value).string().max(30).email(),
})
const [data, changeData] = useData()
const [isValidate, ] = useIsValidate()
const [isTouch, ] = useIsTouch()
const [messageError, ] = useMessageError()
return (
<>
<EmailInputStyled
type={"email"} value={data}
onChange={(e:any)=> {changeData(e.target.value)}}
isValidate={isValidate || !isTouch}
id={props.name}
/>
{!isValidate && isTouch &&
<ErrorTitleStyled className={'error'}>
{messageError}
</ErrorTitleStyled>
}
</>
)
};
- Написание button
Для написания кнопки необходимо из контекста взятьformName
иonSubmit
Также необходим хукuseIsValidateForm
Пример:
interface ISubmitButton {
text: string;
className?: string;
}
export const SubmitButton: FC<ISubmitButton> = (props) => {
const formName = useContext(formNameContext)
const isValidForm = useIsValidForm(formName)
const onSubmit = useContext(onSubmitContext)
const onClick = () => {
if(isValidForm){
onSubmitForm(formName, onSubmit)
}
}
return (
<SubmitButtonStyled className={props.className} isValidForm={isValidForm} onClick={onClick}>
{props.text}
</SubmitButtonStyled>
)
};
-
useFieldSelector
Бывают ситуации, когда значение формы необходимо использовать вне формы, для этого необходимо использоватьuseFieldSelector
Пример:
const search = useFieldSelector({formName: 'searchForm', fieldName: 'search'})
- Направленность на инкапсуляцию логики внутри одного инпута.
- Возможность дебажить формы через redux-devtools(расширения гугл хрома)
- Возможность писать более лаконичные тесты для форм.
-
Не имеет смысла делать универсальные inputs, куда лучше сделать несколько специализированных инпутов.
Вместо того чтобы ограничиться одним инпутом textInput лучше сделать emailInput/passwordInput/phoneInput и тд.
На бэке наверняка во всех emailField будет одинаковая валидация, так же как и на полях телефона и тд. -
Нет ничего лучше, чем хранить данные на фронте в таком-же формате, как и на бэке.
Когда дело касается текстового инпута, это очевидно, но когда дело касается действительно сложных кейсов, про это почему-то забывают
Например: TimeInput
дизайнер прислал дизайн в котором TimeInput состоит из 2 стринговых инпутов. Но на бэке, это одно стринговое поле. В таком случае имеет смысл использовать 1 useField и хранить в сторе данные как строку. Если вы напишите 2 инпута и будете где-то, вне компонента инпута, объединять их, то такой инпут невозможно станет масштабировать, так как подобное объединение прийдется повторять каждый раз, что значительно испортит код. -
Форма должна быть максимально абстрактная. Если смысл вашей формы может понять пм, это хорошая форма.
Пример хорошей формы:
<WrapperForm form={form} onSubmit={(data:IRegistration) => {User.options.registration(data)}}>
<InputTitleStyled>Номер телефона</InputTitleStyled>
<PhoneInput name={'username'} required/>
<InputTitleStyled>Емайл</InputTitleStyled>
<EmailInput name={'email'} required/>
<InputTitleStyled>Пароль</InputTitleStyled>
<PasswordInput name={'password'} required/>
<InputTitleStyled>Повторите пароль</InputTitleStyled>
<PasswordInput name={'password2'} required/>
<SubmitButton text={'Авторизироваться'}/>
</WrapperForm>