Antd Form表单项中修改自身的值无效

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >>

在 class 组件中使用 Antd 的 Form 组件，业务需求中需要在选择某个值时重置最终显示的值。如下图所示：如果选择了【全部】，则不能再选其它选项，如果选择了【全部】以外的选项，则不能再选【全部】选项。

最初的的想法是在Select 组件的 onChange 事件触发时通过 form.setFieldsValue() 方法修改表单的值，代码如下：

<Form.Item label={I18n("商品类型")}>
  {getFieldDecorator("product_types", {
    // initialValue: 'all'
  })(
    <Select
      filterOption={(input, option) => {
        return (
          (option.props.children + "").includes(input) ||
          (option.props.value + "").includes(input)
        );
      }}
      mode="multiple"
      style={{ minWidth: "190px" }}
      allowClear
      placeholder={I18n("全部")}
      onChange={(value: SelectValue, option: any) => {
        
        if ((value as string[]).includes("all")) {
          this.props.form.setFieldsValue({ product_types: ['all'] });
        }
        else {
          this.props.form.setFieldsValue({ product_types: value });
        }
      }}
      >
      <Select.Option value="all" key="all">
        全部
      </Select.Option>
      {getMoneyTypes()}
    </Select>,
  )}
  </Form.Item>

实际测试中发现并未生效。

解决办法是在 onChange 事件中调用 setState 方法，在 setState 的第二个参数中设置 表单的值，如下代码：

<Form.Item label={I18n("商品类型")}>
  {getFieldDecorator("product_types", {
    // initialValue: 'all'
  })(
    <Select
      filterOption={(input, option) => {
        return (
          (option.props.children + "").includes(input) ||
          (option.props.value + "").includes(input)
        );
      }}
      mode="multiple"
      style={{ minWidth: "190px" }}
      allowClear
      placeholder={I18n("全部")}
      onChange={(value: SelectValue, option: any) => {
        
        if ((value as string[]).includes("all")) {
          // 在 setState 的第二个参数中设置 表单的值
          this.setState({
            productTypeValue: value
          }, () => {
            this.props.form.setFieldsValue({ product_types: ['all'] });
          })
        }
        else {
           // 在 setState 的第二个参数中设置 表单的值
          this.setState({
            productTypeValue: value
          }, () => {
            this.props.form.setFieldsValue({ product_types: value });
          })
        }
      }}
      >
      <Select.Option value="all" key="all">
        全部
      </Select.Option>
      {getMoneyTypes()}
    </Select>,
  )}
</Form.Item>