Ant 设计表单 - onAfterChange 处理程序

IT技术 javascript reactjs events antd
2021-05-03 03:56:32

我已经创建了antd每次现场已经通过改变输出形式值到控制台窗体onValuesChange上的功能Form。

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

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

显示代码片段

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

2个回答

你永远不应该这样做！如果我知道目的，我可以更好地帮助你，

但这对你有用：

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

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

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

关键点是为这个滑块组件保持一个内部状态，并通过onChangeduring发送想要的值onAfterChange。

const MouseUpSlider = ({ value, onChange, ...rest }) => {
  const [val, setVal] = useState(value)

  return (
    <Slider
      value={val}
      onAfterChange={(value) => onChange(value)}
      onChange={(value) => setVal(value)}
      {...rest}
    />
  )
}

其它你可能感兴趣的问题
上一篇使用useReducer时如何避免耦合？ 下一篇SameSite Cookie 属性警告未得到修复