Ant Design Form - onAfterChange 处理程序

我使用 antd 创建了一个表单，每当字段发生更改时，它都会使用以下命令将表单值输出到控制台onValuesChange函数在一个Form.

我的问题是Slider组件称之为onValuesChange拖动滑块时起作用，我希望它位于onmouseup.

我知道onAfterChange仅触发滑块事件onmouseup但我不知道如何制作onValuesChange use onAfterChange代替onChange。有人可以就此提供建议吗？

import React, { Component } from 'react';
import { Form, Slider } from 'antd';
const FormItem = Form.Item;

class UnwrappedMyForm extends Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form>
                <FormItem>
                    {getFieldDecorator(`field1`, {})(
                            <Slider range defaultValue={[0, 100]} />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator(`field2`, {})(
                            <Slider range defaultValue={[0, 100]} />
                    )}
                </FormItem>
            </Form>
        );
    }
}

const MyForm = Form.create({
    onValuesChange(props, changedValues, allValues) {
        console.log(allValues);
    }
})(UnwrappedMyForm);

export default MyForm;

工作示例：https://codesandbox.io/s/z2ppnop8x https://codesandbox.io/s/z2ppnop8x

你绝对不应该这样做！如果我知道目的我可以更好地帮助你，

但这对你有用：

render() {
    const { form, errorMessage } = this.props;
    const { getFieldDecorator, setFieldsValue } = form;

    return (
      <Form>
        <FormItem>
          {getFieldDecorator(`slider`, {})(
            <div>
              <Slider onAfterChange={wantedValues => setFieldsValue({ slider: wantedValues })} range />
            </div>,
          )}
        </FormItem>
      </Form>
    );
  }
}
export default Form.create({
  onValuesChange(props, changedValues, allValues) {
    console.log('on change', allValues);
  },

滑块的值和滑块字段的值是分开的，并且您正在手动更新字段值