如何使用 ant design 验证 select 选项

Question

我使用 ant design 创建了一个 select 选项。在选项内部，三个值是硬编码的，一个是输入字段功能正常工作但是当我创建验证规则时不起作用（当我们 select 硬编码选项验证有效但 select 输入验证无效时）。

这里我的 onchange 函数用于 select 和输入

 handleChange(value) {
    console.log(`selected ${value}`);
     this.setState({
         bank:value,
     });
}

 onChangeBank(event){
    this.setState({
        bank:event.target.value
    });
}

这里是我select表格

 <FormItem {...formItemLayout} label="Bank" >
              {getFieldDecorator('bank',{ rules: [{ required: true, message: 'Please provide bank name!' }]}
              )(
                  <Select
                      showSearch
                      style={{ width: 400 }}
                      placeholder="Select a Bank"
                      optionFilterProp="children"
                      onChange={this.handleChange.bind(this)}

                  >
                     <option value="Bank1">Bank1</option>
                      <option value=" Bank2"> Bank2</option>
                      <option value=" Bank3"> Bank3</option>
                      <option value={this.state.bank}> <Input style={{border:'none',height:30}} type="text" placeholder="Type here" onChange={this.onChangeBank.bind(this)}/></option>
                  </Select>              )}</FormItem>

Answer 1

因为您正在覆盖默认的 onChange 事件，您需要在 onChange 处理程序上手动设置字段值。

除了调用 setState 之外还应该这样做，因为 this.state 不会被表单读取。

实际上，您需要添加（假设您有 form 作为道具）：

this.props.form.setFieldsValue({bank: event.target.value})

希望对您有所帮助。

如何使用 ant design 验证 select 选项

How to validate select option using ant design

validation

reactjs

antd