Mobx反应形式不会更新type属性

Question

我有以下内容：

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

    handleClickShowPassword = () => {
        const { field } = this.props
        this.localState.showPassword = !this.localState.showPassword
        console.log('field: ', field)
        if( field.type == 'password' ){
            field.set('type', 'text')
        }
        else {
            //this.props.field.set(this.props.field.type, 'password')
        }
    };

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


export default ElectroTextField;

和：

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

来自：

...
    {
        name: 'changePassword',
        label: 'Change your password',
        fields: [
            {
                name: 'password',
                label: t('user:New pasword'),
                validators: [isNotEmpty, shouldBeAtleast8('changePassword.password')],
                value: itemData.passowrd,
                type: 'password',
                related: ['changePassword.confirmPassword']
            },
            {
                name: 'confirmPassword',
                label: t('user:Confirm password'),
                validators: [isNotEmpty, shouldBeEqualTo('changePassword.password')],
                value: itemData.confirmPassowrd,
                type: 'password'
            }
        ]
    },
...

console.log中的类型值被更改为文本，但是实际的输入类型根本没有更新。