Question

我使用蚂蚁设计创建了一个选择选项。在选项中，三个值是硬编码的，一个是输入字段功能可以正常工作，但是当我创建验证规则不起作用时（当我们选择硬编码选项验证有效但选择输入验证无效时）。

在这里，我的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>

Answer 1

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

除了调用setState之外，还应该执行此操作，因为表单不会读取this.state。

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

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

我希望这会有所帮助。

如何使用蚂蚁设计验证选择选项

1 个答案: