Проверка пароля в Redux-форме только после касания обоих полей - PullRequest
Новая
       42

Проверка пароля в Redux-форме только после касания обоих полей

0 голосов
/ 28 сентября 2018

В настоящее время в моем пользовательском компоненте я использую SFC, который выглядит следующим образом: 

export const InputField = field => (
  <div>
    <TextField required={field.required} invalid={field.meta.touched && !!field.meta.error}
     label={field.label} {...field.input} type={field.type} />
    {field.meta.touched && !!field.meta.error && (<TextFieldHelperText persistent
    validationMsg>{field.meta.error}</TextFieldHelperText>)}
  </div>
);

(Здесь TextField и TextFieldHelperText являются стилизованными компонентами).

Это все хорошо для ввода текстакоторые касаются только самих себя, но в поле Пароль, за которым следует поле подтверждения пароля. Я не хочу, чтобы поле отмечалось как недействительное, пока поле подтверждения пароля также не будет затронуто ... но я не могу понять,как получить ссылку на поле подтверждения пароля и сказать по существу: 

invalid={field.meta.touched && otherField.meta.touched && !!field.meta.error}

Я чувствую, что упускаю что-то очевидное!

1 Ответ

0 голосов
/ 28 сентября 2018

Оберните оба поля в компонент-оболочку, используйте состояние родительского компонента для хранения информации о полях, к которым вы прикоснулись, и передайте реквизит, если проверка возможна.Как то так 

class PassFields extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      passTouched: false,
      passConfirmTouched: false,
    }
  }

  handlePassFocus = (e) => {
    this.setState({ passTouched: true })
  }

  handlePassConfirmFocus = (e) => {
    this.setState({ passConfirmTouched: true })
  }

  render() {
    const canBeValidated = this.state.passTouched && this.state.passConfirmTouched
    return (
        <div className="form">
            <PassField
                {...this.props}
                onFocus={this.handlePassFocus}
                canBeValidated={canBeValidated}
            />
            <PassConfirmField
                {...this.props}
                onFocus={this.handlePassConfirmFocus}
                canBeValidated={canBeValidated}
            />
        </div>
    )
  }
}

И теперь вы можете использовать что-то вроде этого 

<TextField 
  required={field.required} 
  invalid={field.canBeValidated && !!field.meta.error}
  onFocus={field.onFocus}
...
...