React-validation-mixin问题。

Question

我正在使用react-validation-mixin，编辑时遇到验证问题。即使字段被填充，验证器的行为就像它们是空的。我已记录状态，值也出现在那里。

 validatorTypes: {
    shares: Joi.string().required(),
    shareType: Joi.string().required(),
    price: Joi.string().required(),
},
getInitialState: function() {
    return {
        shares: this.props.data.shares,
        shareType: this.props.data.share_type,
        price: this.props.data.price
    };
},
 onSave: function(event) {
    event.preventDefault();
    console.log("Current state: ",this.state);
    onValidate = function(error, validationErrors) {
        for (var k in this.state.validationMessages) {
            if (!this.isValid(k)) {
                validationErrors[k][0] = this.state.validationMessages[k];
            }
        }
        if (error) {
            this.setState({
                feedback: 'Form is invalid do not submit'
            });
        } else {
            this.setState({
                feedback: 'Form is valid send to action creator'
            });
        }
    }.bind(this);
    this.validate(onValidate);
},
render: function() {
     console.log("Current state on render: ",this.state);
     if(this.state.users){
        var userOptions = this.state.users.map(function(user, idx){
          return ( <option value={user.id}>{user.first_name} {user.last_name}</option>);
      }.bind(this));
    }
    return(
        <div
        className="modal fade"
        ref="transactionModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        aria-hidden="true">
            <div className="modal-dialog">
               <div className="modal-content">
                    <div className="modal-header">
                        <button
                        type="button"
                        className="close"
                        data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                        <h4 className="modal-title" id="myModalLabel">{this.props.data.title}</h4>
                    </div>
                    <div className="modal-body">
                        <form role="form">
                            <div className={this.getClasses('shares', false)}>
                                <label>Shares *</label>
                                <input
                                className="form-control"
                                valueLink={this.linkState('shares')}
                                onBlur={this.handleValidation('shares')}/>
                                {this.getValidationMessages('shares').map(this.renderHelpText)}
                            </div>
                            <div className={this.getClasses('shareType', false)}>
                                <label>Type *</label>
                                <select
                                className="form-control"
                                placeholder="Select share type"
                                valueLink={this.linkState('shareType')}
                                onBlur={this.handleValidation('shareType')}>
                                    <option></option>
                                    <option value="1">Common</option>
                                    <option value="2">Preffered</option>
                                </select>
                                {this.getValidationMessages('shareType').map(this.renderHelpText)}
                            </div>
                            <label>Price *</label>
                            <div className={this.getClasses('price', true)}>
                                <input
                                type="text"
                                className="form-control"
                                placeholder="Set share price"
                                valueLink={this.linkState('price')}
                                onBlur={this.handleValidation('price')}/>
                                <span className="input-group-addon"><i className="fa fa-eur"></i></span>
                            </div>
                            <div className="has-error">
                                {this.getValidationMessages('price').map(this.renderHelpText)}
                            </div>
                            <label>Transaction partner</label>
                            <div className="form-group">
                               <select className="form-control" placeholder={"Select party 2"} valueLink={this.linkState('party2')}>
                                    <option></option>
                                    {userOptions}
                                </select>
                            </div>
                        </form>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default close-transaction-modal" data-dismiss="modal">Close</button>
                        <button type="button" className="btn btn-info" onClick={this.onSave}>Save</button>
                    </div>
                  </div>
            </div>
        </div>
    );
}

}）;