Я использую два компонента, и я использую этот шаблон: дочерний компонент должен оставаться изолированным как можно больше - он обрабатывает собственную ошибку проверки. Родительский компонент должен проверять наличие ошибок, которые имеют зависимости между дочерними элементами. Итак, в моем случае: поле password
и password confirmation
.
Вот мой код:
a) SignUp (родительский)
Установка начального состояния.
constructor() {
super();
this.state = {
isPasswordMatching: false
};
}
В методе render()
я выводил свой дочерний компонент. Через prop под названием callback
Я распространяю метод isPasswordMatching()
, связывая родительский this
. Цель состоит в том, что метод может быть вызван в дочернем компоненте.
<TextInput
id={'password'}
ref={(ref) => this.password = ref}
callback={this.isPasswordMatching.bind(this)}
// some other unimportant props
/>
<TextInput
id={'passwordConfirm'}
ref={(ref) => this.passwordConfirm = ref}
...
isPasswordMatching()
метод проверяет, соответствуют ли пароли (через refs this.password
и this.passwordConfirm
), а затем обновляется состояние. Обратите внимание, что этот метод вызывается внутри дочернего элемента (пароль или парольConfirm).
isPasswordMatching() {
this.setState({
isPasswordMatching: this.password.state.value === this.passwordConfirm.state.value
});
}
b) TextInput (child)
Установка начального состояния.
constructor() {
super();
this.state = {
value: '',
isValid: false
};
}
Выполняется проверка смазанности, и состояние обновляется.
onBlur(event) {
// doing validation and preparing error messages
this.setState({
value: value,
isValid: this.error === null
});
}
Последние. Вызывается обратный вызов.
componentDidUpdate(prevProps) {
if (prevProps.id === 'password' || prevProps.id === 'passwordConfirm') {
prevProps.callback();
}
}
Вопрос
Как-то мои ссылки теряются. Сценарий:
- Родительский компонент - это рендер
- Реализованные дочерние компоненты
- Я вхожу в одно из полей ввода и выхожу (это вызывает метод
onBlur()
) - состояние обновляется, дочерний компонент отображается -
componentDidUpdate()
вызывается иprevProp.callback()
также - При переходе к методу
isPasswordMatching()
я выводяthis.password
иthis.passwordConfirm
- это объекты с ожидаемыми значениями ссылки. Обновляется состояние родительского компонента. - Затем снова воспроизводятся все дети, компоненты обновляются, вызывается callback, но на этот раз
this.password
иthis.passwordConfirm
находятсяnull
.
Я понятия не имею, почему ссылки потеряны. Должен ли я делать что-то по-другому? Заранее благодарю вас.