蚂蚁设计表单-onAfterChange处理程序 [英] Ant Design Form - onAfterChange handler

问题描述

我已经创建了一个带有antd的表单，只要使用 Form 上的 onValuesChange 函数来更改字段，该表单就会将表单值输出到控制台.

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.

我的问题是 Slider 组件在拖动滑块时调用此 onValuesChange 函数，我希望它位于 onmouseup 处.

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

我知道滑块的 onAfterChange 事件只会触发 onmouseup ，但是我不确定如何使 onValuesChange 使用 onAfterChange 而不是 onChange .有人可以提供建议吗?

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;

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

推荐答案

您永远不要这样做！如果我知道我的目的可以为您提供更好的帮助，

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

但这对您有用:

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

这篇关于蚂蚁设计表单-onAfterChange处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！