React Formik: как использовать пользовательские функции onChange и onConfirmChange для ввода запроса - PullRequest
Новая
       3

React Formik: как использовать пользовательские функции onChange и onConfirmChange для ввода запроса

2 голосов
/ 25 сентября 2019

Я хотел бы, чтобы мой 2-й PinInput отправлял сообщение об ошибке, когда пароль не совпадает: 

class PasswordInput extends Component {
    state = "";

    onChange = () => {
        this.setState({
            value: this.state.value
        })
    }

    onConfirmChange = () => {
        this.setState({
            value: !this.state.value});
    }


    render() {
        const { field, form } = this.props;

        console.log(form.errors[field.name]);
        return (
            <React.Fragment>

                <label className="title-password">Saisi ton code à 4 chiffres</label>
                <PinInput {...field} className="pincode-input-container"
                    length={4}
                    onChange={this.onChange}
                    type="numeric"
                    secret='true'
                    inputStyle={{
                        background: 'white',
                        height: '72px',
                        borderRadius: '20px',
                        borderColor: form.errors[field.name] ? 'red' : 'transparent'
                    }}
                />
                {form.errors[field.name] &&
                    <div>
                        {form.errors[field.name]}
                    </div>}

                <label className="title-password">Confirme le code</label>
                <PinInput {...field} length={4}
                    onChange={this.onConfirmChange}
                    type="numeric"
                    secret="true"
                    inputStyle={{
                        background: 'white',
                        border: 'none',
                        height: '72px',
                        borderRadius: '20px',
                        borderColor: form.errors[field.name] ? 'red' : 'transparent'
                    }}
                />
                {form.errors[field.name] &&
                    <div>
                        {form.errors[field.name]}
                    </div>}
            </React.Fragment>
        );
    }
}

export default PasswordInput;

Я создаю 2 функции, которые вызывают ввод типа onChange (и onConfirmChange) 2, но яне знаю, как это сделать.

У меня есть идея, но я не могу ее реализовать.

Спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 25 сентября 2019

Опция 1:

Если мы используем вашу логику для проверки паролей, она должна быть: 

yourOnChange = (e) => {
    // Whatever logic goes here ...
    // ...

    // Forkmik's onChange
    this.props.onChange(e);
  };

Опция 2:

Вы можете сделать полепроверка уровня:

Пример: 

 // Assuming this.props is formiks's props.  
 // some elements here...
 <Field name="password1" />

 <Field name="password2"
   onChange={this.props.onChange}
   onBlur={this.props.onBlur}
   validate={validatePassword2} />

// somewhere in your component...
 validatePassword2 = (value) => {
  let error;
  if (value === this.props.values[password1]) {
    error = 'Passwords don\'t match!';
  }
  return error;
}
0 голосов
/ 25 сентября 2019

Если вы хотите сделать это хорошим способом, я рекомендую использовать yup для проверки и выполнить условную проверку в самой схеме.

Но для этого вы также можете выполнить сравнение вручную, точно так же, как вы получаете доступ к состоянию ошибок formik - просто возьмите значения вместо каждого поля и условно отобразите ваше сообщение об ошибке на основе результата сравнения.

...