在蚂蚁设计输入 addonBefore 中反应验证器 getFieldDecorator

时间:2021-01-31 02:22:35

标签: reactjs ant-design-pro

我使用 ant 设计库有一个带下拉菜单的文本框。我想对文本框和下拉列表进行验证。我在 addonBefore 中添加验证以在触发 onChange 事件时为下拉列表提供验证。但是, dropable 中的验证在回调执行后无法显示验证结果。如果在 addonBefore 函数中添加,我怀疑验证不起作用。我能够毫无问题地验证文本框。欣赏线索/解决方案。谢谢。

onPrefixChange = (rule, value, callback) => {
   
    callback('error'); // didn't highlight as error in red color after execute.
  
}
<Input onKeyPress={this.numericTextBox}
                            addonBefore={getFieldDecorator('FieldPrefix', {
                                initialValue: this.getDefaultPrefix(),
                                validateFirst: true,
                                validate: [
                                    {
                                        trigger: 'onChange',
                                        rules: [
                                            {
                                                validator: this.onPrefixChange
                                            }
                                        ]
                                    }
                                ]
                            })
                                    (<Select dropdownMatchSelectWidth={false} loading={!this.state.prefixlist} getPopupContainer={trigger => trigger.parentNode}>
                                        {this.state.prefixlist && this.state.prefixlist.map(o =>
                                            <Select.Option key={o.countrycode} value={o.contactprefix}><span className={'flag-icon flag-icon-' + o.countrycode.toLowerCase()}></span> &nbsp; {o.contactprefix}</Select.Option>
                                        )}
                                    </Select>)} />

0 个答案:

没有答案