Question

我想让我的第二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输入，但是我不知道该怎么做。

我有一个开始的想法，但我无法实现。

感谢您的帮助！

Answer 1

选项1：

如果我们使用您的逻辑来验证密码，则应该为：

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

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

选项2：

您可以进行field level validation:

示例：

 // 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;
}

Answer 2

如果您想以一种不错的方式做到这一点，我建议使用yup进行验证，并在架构本身中进行条件验证。

但是要实现这一点，您也可以手动进行比较，就像访问formik的错误状态一样-只是获取每个字段的值，然后根据比较结果有条件地呈现错误消息。

React Formik：如何将自定义函数onChange和onConfirmChange用于请求输入

2 个答案: