Чего я пытаюсь достичь: У меня много форм, и я хочу сохранить логику проверки формы в моем HOC, чтобы мне не приходилось повторять логику проверки, так как большинство форм имеют одинаковые поляи некоторые дополнительные или меньшие поля.
Как я реализовал:
Обучение созданию HOC, следовал этому примеру Пример HOC и попытался создатьHOC, как показано ниже.
import React from 'react';
import {
spaceCheck,
specialCharacterCheck,
numberValidator
} from '../../utility/validators';
const fieldHOC = (WrappedComponent) => {
class HOC extends React.Component {
state = {
error: {
name_first: {
fieldType: 'name_first',
errorType: 0
},
name_last: {
fieldType: 'name_last',
errorType: 0
},
email: {
fieldType: 'email',
errorType: 0
}
}
};
getErrorMessage = (fieldType, errorType) => {
this.setState({
error: {
...this.state.error,
[fieldType]: {
...this.state.error[fieldType],
errorType
}
}
});
};
checkFieldsError = (currentFocus, nextFocus) => {
//Not able to get props passed by below component in class functions
console.log('MY PROPS', this.props);
const field = this.props[currentFocus];
if (field === '' || spaceCheck(field)) {
this.getErrorMessage(currentFocus, 1);
} else if (specialCharacterCheck(field)) {
this.getErrorMessage(currentFocus, 2);
} else if (numberValidator(field) || numberValidator(field)) {
this.getErrorMessage(currentFocus, 3);
} else {
this.setState({
error: {
...this.state.error,
[currentFocus]: {
...this.state.error[currentFocus],
errorType: 0
}
}
});
}
this[nextFocus].focus();
}
render() {
const { children } = this.props;
// Here able to access props(name_first, name_last and email) passed from below component
// console.log('PROPS', this.props);
return (
<WrappedComponent
{...this.props}
error={this.state.error}
checkFieldsError={this.checkFieldsError}
>
{children}
</WrappedComponent>
);
}
}
return HOC;
};
export default fieldHOC;
Компонент, в котором я использую этот HOC:
const FieldValidation = fieldHOC(View);
class Account extends Component {
//Some class functions
render() {
const { spaceBottom, error } = this.state;
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
keyboardShouldPersistTaps="handled"
behavior={Platform.OS === 'ios' ? 'padding' : null}
>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="handled"
alwaysBounceVertical={false}
contentInset={{ bottom: 0 }}
>
<FieldValidation
name_first={this.state.name_first}
name_last={this.state.name_last}
email={this.state.email}
{...this.props}
>
<View
style={[
styles.UserContainer,
CommonStyle.shadowStyle
]}
>
<Text style={styles.headingTextStyle}>
Account Details
</Text>
<FormTextInputComponent
{...testID('first_name')}
errorType={this.props.error.name_first.errorType}
onChangeText={this.handleTextChange('name_first')}
textInputRef={ref => {this.name_first = ref;}}
autoCapitalize="none"
spellCheck={false}
autoCorrect={false}
blurOnSubmit={false}
onSubmitEditing={() => {
this.props.checkFieldsError('name_first', 'name_last');
}}
/>
{this.props.error.name_first.errorType ?
(
<ErrorMessage textColor="#EA2027" error={error.name_first} />
)
: null}
//Last part
export default fieldHOC(connect(mapStateToProps)(Account));
В вышеупомянутом компоненте я пытаюсь вызвать функцию проверки, написанную на HOCчто checkFieldsError.Проблема, с которой я сталкиваюсь, состоит в том, что пропущенные в <FieldValidation реквизиты, такие как name_first, доступны в функции рендеринга HOC, но те же реквизиты недоступны в функциях класса HOC.
Скорее всего, то, что я пробовалэто антипаттерн в React (мое предположение).Может кто-нибудь помочь мне разобраться в проблеме и найти правильный способ ее решения?
Редактировать: Пример реализован в кодах и в поле Пример