Ant 设计表单 - 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

推荐答案

我面临同样的问题，也许这是一个更简单的方法:

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

关键点是维护这个滑块组件的内部状态，并在onAfterChange期间通过onChange发送想要的值.

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}
    />
  )
}

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