ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.83k stars 443 forks source link

[Bug Report]级联选择器 在<Form.Item>中操作选项,无法触发表单校验 #974

Open Emiya0306 opened 5 years ago

Emiya0306 commented 5 years ago

Description

  1. 当级联选择器在Form.Item中,有失焦校验时,级联选择器的选项无法选中 (解决方案:Trigger设置为"change"可解决)
  2. 级联选择器 在中选择选项,无法触发表单校验。

Reproduce Steps

77sn1-h7npf

表单验证

在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。

constructor(props) {
  super(props);

  this.state = {
    options: [
      {
        value: '上海',
        label: '上海',
        children: [{
          value: '浦东新区',
          label: '浦东新区',
        }, {
          value: '黄浦区',
          label: '黄浦区',
        }]
      },
    ],
    form: {
      ...
      area: []
    },
    rules: {
      ...
      area: [
        { required: true, message: '请填写配送区域', trigger: 'blur' }
      ]
    }
  };
}
...
render() {
  return (
    <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="80" className="demo-ruleForm">
      ...
      <Form.Item label="配送区域" prop="area">
        <Cascader
          clearable
          filterable
          placeholder="选择区域"
          value={this.state.form.area}
          options={this.state.options}
          onChange={this.onChange.bind(this, 'area')}
        />
      </Form.Item>
      ...
    </Form>
  )
}

:::

Error Trace (if possible)

Solution

Additional Information