javascript - 在 componentDidMount() react.js 中应用 jquery-inputMaks 后没有触发事件

Question

下面的代码是在 cellNumber 字段上应用国家代码和掩码。正确涂抹面膜。但是在 cellNumber 字段上，我已经附加了 onChange 事件，该事件在应用掩码后不会被触发。在 componentDidMount() 函数中，我在 cellNumber 字段上应用了掩码。

如果我删除以下两行，则已经应用 onChange 事件被触发，我可以看到验证消息。

$(this.refs.cellNumber.refs.input).inputmask("remove"); $(this.refs.cellNumber.refs.input).inputmasks(this.maskOpts);

var contactMask = React.createClass({
mixins: [ClassSet, InputValidator],

getInitialState: function() {
    return {}
},
componentDidMount: function() { 
    this.params = {
        phoneNumber: '',
        countryCode: ''
    };
    var actualPhoneValue = '';
    UserStore.getMaskAndDialCodes().then((result) => {
        this.setState({
            countryInfo: result
        });
        var maskList = $.masksSort(this.state.countryInfo, ['#'], /[0-9]|#/, "mask");
        var contactMasking = this.contactNumberMask.bind(this);
        this.maskOpts = {
            inputmask: {
                definitions: {
                    '#': {
                        validator: "[0-9]",
                        cardinality: 1
                    }
                },
                showMaskOnHover: false,
                autoUnmask: false,
                clearMaskOnLostFocus: true
            },
            match: /[0-9]/,
            replace: '#',
            list: maskList,
            listKey: "mask",
            onMaskChange: function(maskObj, determined) {
                if (determined) {
                    this.params.countryCode = contactMasking(maskObj.mask);
                }
            }.bind(this)
        };
        $(this.refs.cellNumber.refs.input).inputmask("remove");
        $(this.refs.cellNumber.refs.input).inputmasks(this.maskOpts);
    }, (errorMsg) => {
        this.setState({
            countryInfo: []
        });
    }.bind(this));
},


    render: function() {
    return (
        <EditInputView label = "Contact Number" ref="cellNumber" fieldName = {this.props.fieldName}
        placeholder = "Enter Number" inputClass = {this.props.inputClass}
        required="true" inputValue = {this.state.phoneNumber}
        onChange = {this.validateInputValues}
        validationArrayName = 'phoneNumberErrors'
        validateMessages = {this.phoneNumberErrors}
        wrapperClass = {this.props.contactClass} />
    );
}

});

export default contactMask;



1. Edit-input-view.js

import ClassSet from '../../../mixins/class-set-mixin.js';
import CommonActions from '../../../mixins/common-mixin.js';

var EditInputView = React.createClass({
mixins: [ClassSet,React.addons.LinkedStateMixin, CommonActions],

propTypes: {
    wrapperClass :React.PropTypes.string,
    inputClass: React.PropTypes.string,
    label:React.PropTypes.string,
    type: React.PropTypes.string,
    placeholder: React.PropTypes.string,
    onBlur: React.PropTypes.func,
    onChange: React.PropTypes.func,
    validateMessages: React.PropTypes.array,
    required: React.PropTypes.bool,
    inputValue: React.PropTypes.string,
    fieldName: React.PropTypes.string,
    validationArrayName: React.PropTypes.string,
    iHelpText: React.PropTypes.string
},

getDefaultProps: function() {
    return {
        wrapperClass: '',
        inputClass: 'form-control',
        label: 'Input',
        type: 'text',
        placeholder: '',
        onChange:function() {},
        onBlur: function() {},
        validateMessages : [],
        required: false,
        inputValue: '',
        fieldName: '',
        validationArrayName: '',
        iHelpText: ''
    };
},
getInitialState: function() {
    return { data: this.props.inputValue };
},
componentWillReceiveProps: function(newProps) {
    this.setState({
        data:newProps.inputValue
    });
},
componentDidMount: function() {
    /*
    * Triggered blur to set value on blur event of text field for form submission.
    */
    this.informationLabelClass = 'pull-left infoLabel';
    var ENTER_KEY_CODE = 13;
    $(this.refs.input).keyup(function(e) {
        var keyCode = e.keyCode || e.which;
        if(keyCode === ENTER_KEY_CODE) {
            $(this.refs.input).blur();
        }
    }.bind(this));
},

onBlur: function() {
    var valueLink = this.linkState('data');
    valueLink.requestChange(e.target.value);
    this.props.onBlur(this.props.fieldName, this.refs.input.value, this.props.validationArrayName);
},

onChange: function(e) {
    var valueLink = this.linkState('data');
    valueLink.requestChange(e.target.value);
    this.props.onChange(this.props.fieldName, this.refs.input.value, this.props.validationArrayName);
},

render: function(argument) {
    var infoHelpText = this.informationHelpText(this.props.iHelpText);
    var valueLink = this.linkState('data');
    var elementId = Math.random().toString(36).substr(2, 9);
    var requiredClass = this.getClassSet({
        hide: !this.props.required
    });
    return (
        <div className={this.props.wrapperClass}>
            <label htmlFor={elementId} className= {this.informationLabelClass}>{this.props.label}<i className = {requiredClass}>*</i></label>
            {infoHelpText}
            <input id={elementId} type="text" name = {this.props.fieldName} value={valueLink.value || ''} ref="input" dafaultValue={this.props.inputValue} placeholder={this.props.placeholder} onChange={this.onChange} className={this.props.inputClass}/>
            {_.map(this.props.validateMessages, this.renderHelpText)}
        </div>
    );
},

renderHelpText: function(message,key) {
    return (
        <span key={key} className="errmsg">{message}</span>
    );
}
});

export default EditInputView;