Ant Design Form - обработчик onAfterChange

Question

Я создал форму с помощью antd, которая выводит значения формы на консоль при каждом изменении поля с помощью функции onValuesChange в Form.

Моя проблема заключается в том, что Slider компоненты вызывают эту функцию onValuesChange при перетаскивании ползунка, и я бы хотел, чтобы вместо этого она была на onmouseup.

Я знаю, что событие onAfterChange ползунка вызывает только onmouseup, но я не уверен, как заставить onValuesChange использовать 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

Answer 1

никогда не делай этого! если я узнаю цель, я могу помочь вам лучше,

но это будет работать для вас:

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

Значение ползунка и значение поля ползунка разделены, и вы обновляете значение поля вручную