Ant Design Form - onAfterChange handler

问题

I've created a form with antd that outputs the form values to the console whenever a field has changed by using the onValuesChange function on a Form.

My issue is that Slider components call this onValuesChange function whilst dragging the slider and I'd like it to instead be at onmouseup.

I'm aware that the onAfterChange event of a slider only fires onmouseup but I'm not sure how to make onValuesChange use onAfterChange instead of onChange. Can anyone offer advice on this?

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;

Working example: https://codesandbox.io/s/z2ppnop8x

回答1:

you should never do it! if I will know the purpose I can help you better,

but this will work for you:

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);
  },

The value of the slider and the value of the slider field is separate and you are updating the field value manualy

来源：https://stackoverflow.com/questions/54047722/ant-design-form-onafterchange-handler