我有一个antd表单,它有一个select组件作为表单项。类似这样的东西:
<Form.Item label='Client Name'>
{
getFieldDecorator('clientId', {
rules: [{
required: true,
message: 'Please select client!',
}],
initialValue: this.state.clientId
})(
<Select
showSearch
loading={this.props.isClientLoading}
optionFilterProp='title'
style={formItemStyle}
placeholder='Select Client'
onChange={this.handleClientChange}
>
{this.props.clientOptions}
</Select>
)
}
我正在维护clientId
的状态。每当用户从select下拉列表中选择一个选项时,我都会更新方法handleClientChange
中的状态值。但是,在一个条件下,我不想更新状态值,在这种情况下,下拉选择也不应该改变。但问题是select
调用handleClientChange
方法,然后更新下拉字段。我的handleClientChange
代码看起来像这样:
handleClientChange = async (selectedClientId: any) => {
if (this.state.isSomethingChanged) {
debugger;
/* setTimeout(() => {
this.props.form.setFieldsValue({ clientId: this.state.clientId});
}, 100); */
this.props.form.setFieldsValue({ clientId: this.state.clientId});
正如你所看到的,我试图更新props表单值,但它只更新了几分之一秒,然后select
内部触发新值并对其进行更改。
正如你所看到的,我尝试了一种设置超时的方法,它很有效,但这是一种非常令人不快的用户体验。有人能帮我恢复下拉列表的旧值吗?
附言:我尝试设置select
组件的value
道具,但当它被封装在getFieldDecorator
中时,这不起作用。Antd负责使其成为受控组件。
如果您不希望选择特定选项:
- 不要为其创建选项
- Make已禁用,因此无法选择