Javascript 在componentDidMount（）react.js中应用jquery inputMaks后不会触发事件

下面的代码用于在cellNumber字段上应用国家代码和掩码。 正确使用面罩。但在cellNumber字段上，我已经附加了onChange事件，它在应用掩码后不会被触发。 在componentDidMount（）函数中，我在cellNumber字段上应用了掩码

如果我删除下面两行，那么已经应用的onChange事件将被触发，并且我可以看到验证消息

$（this.refs.cellNumber.refs.input）.inputmask（“删除”）； $（this.refs.cellNumber.refs.input）.inputmasks（this.maskOpts）

var contactMask=React.createClass({
mixins:[类集，InputValidator]，
getInitialState:函数（）{
返回{}
},
componentDidMount:函数（）{
this.params={
电话号码：“”，
国家代码：“”
};
var actualPhoneValue=''；
UserStore.getMaskAndDialCodes（）。然后（（结果）=>{
这是我的国家({
国家信息：结果
});
var maskList=$.masksSort（this.state.countryInfo，['#']，/[0-9]|#/，“mask”）；
var contactMasking=this.contactNumberMask.bind（this）；
此参数为.maskOpts={
输入掩码：{
定义：{
'#': {
验证程序：“[0-9]”，
基数：1
}
},
showmaskonhaver:false，
自动取消掩码：false，
clearMaskOnLostFocus：正确
},
匹配：/[0-9]/,，
替换：“#”，
名单：面具师，
listKey:“面具”，
onMaskChange：函数（maskObj，已确定）{
如果（已确定）{
this.params.countryCode=触点屏蔽（maskObj.mask）；
}
}.绑定（此）
};
$（this.refs.cellNumber.refs.input）.inputmask（“删除”）；
$（this.refs.cellNumber.refs.input）.inputmasks（this.maskOpts）；
}，（errorMsg）=>{
这是我的国家({
国家信息：[]
});
}.约束（这个）；
},
render:function（）{
返回(
);
}
});
导出默认联系人掩码；
1.Edit-input-view.js
从“../../../mixins/class set mixin.js”导入类集；
从“../../../mixins/common mixin.js”导入CommonActions；
var EditInputView=React.createClass({
mixin:[ClassSet，React.addons.LinkedStateMixin，CommonActions]，
道具类型：{
包装器类：React.PropTypes.string，
inputClass:React.PropTypes.string，
标签：React.PropTypes.string，
类型：React.PropTypes.string，
占位符：React.PropTypes.string，
onBlur:React.PropTypes.func，
onChange:React.PropTypes.func，
validateMessages:React.PropTypes.array，
必需：React.PropTypes.bool，
inputValue:React.PropTypes.string，
字段名：React.PropTypes.string，
ValidationAryName:React.PropTypes.string，
iHelpText:React.PropTypes.string
},
getDefaultProps:function（）{
返回{
包装器类：“”，
inputClass:“表单控件”，
标签：“输入”，
键入：“文本”，
占位符：“”，
onChange:function（）{}，
onBlur:function（）{}，
validateMessages:[]，
必填项：false，
输入值：“”，
字段名：“”，
验证名称：“”，
iHelpText:'
};
},
getInitialState:函数（）{
返回{data:this.props.inputValue}；
},
组件将接收道具：函数（新道具）{
这是我的国家({
数据：newProps.inputValue
});
},
componentDidMount:function（）{
/*
*触发模糊以设置表单提交文本字段的模糊事件的值。
*/
this.informationLabelClass='pull left infoLabel'；
var ENTER_KEY_CODE=13；
$（this.refs.input）.keyup（函数（e）{
var keyCode=e.keyCode | | e.which；
如果（键码===输入键码）{
$（this.refs.input）.blur（）；
}
}.约束（这个）；
},
onBlur:function（）{
var valueLink=this.linkState（'data'）；
valueLink.requestChange（如目标值）；
this.props.onBlur（this.props.fieldName、this.refs.input.value、this.props.validationaryName）；
},
onChange：函数（e）{
var valueLink=this.linkState（'data'）；
valueLink.requestChange（如目标值）；
this.props.onChange（this.props.fieldName、this.refs.input.value、this.props.validationaryName）；
},
呈现：函数（参数）{
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({
隐藏：！this.props.required
});
返回(
{this.props.label}*
{infoHelpText}
{{{.map（this.props.validateMessages，this.renderHelpText）}
);
},
renderHelpText:函数（消息、键）{
返回(
{message}
);
}
});
导出默认的EditInputView；

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;