Mobx仅针对密码字段onClick反应形式切换验证器

Question

我有以下内容：

class UserProfileWrapper extends React.Component<*> {
    props: TypeProps;

    @observable localState: Object = {
        password: false
    }

    enabledPasswordValidation = () => {
        this.localState.passowrd = true
        console.log(this.localState.passowrd)
    }

    getUserData = () => {
        return this.props.userStore.me === null ? {} : this.props.userStore.me;
    }

    render(): ?React.Element<*> {
        const formData: Object = this.getUserData();
        const form: Object = getForm(formData, this.props.t, this.localState.password);

        console.log(this.localState.password)

        return (
            this.props.userStore.me ?
                <UserProfile 
                    enablePasswordValidation={this.enabledPasswordValidation} 
                    form={form} 
                />
                :
                <Loading />
        );
    }
}

export default translate()(UserProfileWrapper);
...


const userFields: Function = (itemData: Object, t: Function, isEnabled: boolean) => {
...
    {
        name: 'changePassword',
        label: 'Change your password',
        fields: [
            {
                name: 'password',
                label: t('user:New pasword'),
                validators: isEnabled ? [isEmpty, setMininiumLength('changePassword.password', 8)] : null,
                value: itemData.passowrd,
                type: 'password',
                related: ['changePassword.confirmPassword']
            },
            {
                name: 'confirmPassword',
                label: t('user:Confirm password'),
                validators: isEnabled ?  [isEmpty, shouldBeEqualTo('changePassword.password')] : null,
                value: itemData.confirmPassowrd,
                type: 'password'
            }
        ]
    },
...

export const getForm: Function = (itemData: Object, t:Function, isEnabled: boolean) => {
    const fields: Object = userFields(itemData, t, isEnabled);
    console.log('isEnabled: ', isEnabled)
    return userCreate(fields);
};

在“ UserProfile”组件中，我具有：

...
                    <FormSection form={form} section="changePassword">
                        <ElectroTextField 
                            enablePasswordValidation={this.props.enablePasswordValidation}
                            field={form.$('changePassword.password')} 
                        />
                        <ElectroTextField 
                            enablePasswordValidation={this.props.enablePasswordValidation} 
                            field={form.$('changePassword.confirmPassword')} 
                        />
                    </FormSection>
...

，ElectroTextField是：

@observer class ElectroTextField extends React.Component {
    @observable localState = {
        showPassword: false
    }

    passwordFeildCheck: Function = () => {
        const { field }: Object = this.props;
        return field.name === 'password' || field.name === 'confirmPassword';
    }

    handleClickShowPassword: Function = () => {
        const { field }: Object = this.props;
        this.localState.showPassword = !this.localState.showPassword;

        if (field.type === 'password') {
            field.type = 'text';
        } else {
            field.type = 'password';
        }
    };

    setDefaultMessage: Function = (field: Object) => {
        let message: string = '';

        switch (field.name) {
            case 'password':
                message =  'Please type a password that is at least 8 characters long';
                break;
            case 'confirmPassword':
                message =  'Please re-type your choosen password';
                break;
        }

        return message;
    }

    handleOnClick = (e) => {
        const { field } = this.props

        if(field.name === 'password' || field.name === 'confirmPassword'){
            console.log('enable password validation')
            this.props.enablePasswordValidation();
        }
    }

    render(): Function {
        const { field }: Object = this.props;
        return (
            <TextField
                {...field.bind()}
                onClick={this.handleOnClick}
                error={field.hasError}
                helperText={field.showError ? field.error : this.setDefaultMessage(field)}
                required={field.rules === 'required'}
                margin="normal"
                InputProps={
                    this.passwordFeildCheck()
                    ?
                        {
                            endAdornment:
                            <InputAdornment position="end">
                                <IconButton
                                    aria-label="Toggle password visibility"
                                    onClick={this.handleClickShowPassword}
                                >
                                    {
                                        this.localState.showPassword
                                            ?
                                                <Visibility />
                                                :
                                                <VisibilityOff />
                                    }
                                </IconButton>
                            </InputAdornment>
                        }
                    :
                    null
                }
            />
        );
    }
}


export default ElectroTextField;

提交表单时，将为所有表单字段触发验证规则。但是，我希望如果您不与密码字段进行交互，则一开始将不会对其进行验证。仅当您与他们互动时，才可以。

我尝试使用标志来更新click上的验证器属性，但是它不起作用。