如何使用 ant design 验证选择选项答案

【问题标题】：How to validate select option using ant design如何使用 ant design 验证选择选项
【发布时间】：2018-12-19 00:04:48
【问题描述】：

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

这是我的 onchange 选择和输入函数

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

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

在这里我选择表格

 <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>

【问题讨论】：

尝试使用value.target.value?
是的，我添加了，但是像这样的“值”这样的错误显示没有定义为 no-undef

标签： reactjs validation antd

【解决方案1】：

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

这应该在您致电setState 之外完成，因为表单不会读取this.state。

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

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

我希望这会有所帮助。

【讨论】：