Ant Design Form - onAfterChange handler

Question

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

Answer 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

Answer 2

I'm facing the same issue and maybe this is a simpler approach:

The keypoint is to maintain an internal state for this slider component and send the wanted value through onChange during onAfterChange .

 const MouseUpSlider = ({ value, onChange, ...rest }) => { const [val, setVal] = useState(value) return ( <Slider value={val} onAfterChange={(value) => onChange(value)} onChange={(value) => setVal(value)} {...rest} /> ) }