javascript - Ant Design Form - onAfterChange 处理程序

Question

我使用 antd 创建了一个表单，只要在 Form 上使用 onValuesChange 函数更改了字段，它就会将表单值输出到控制台。

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

我知道 slider 的 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);
  },

slider 的值和 slider 字段的值是分开的，您正在手动更新字段值