Форма Ant Design - обработчик onAfterChange
Я создал форму с помощью 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.info(allValues);
}
})(UnwrappedMyForm);
export default MyForm;Рабочий пример: https://codesandbox.io/s/z2ppnop8x
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info('on change', allValues);
},
Значение ползунка и значение поля ползунка являются отдельными, и вы обновляете значение поля вручную.
так что вы можете решить эту проблему двумя способами. Вариант 1 фильтрует результат onChange и вызывает запрос Ajax только тогда, когда он имеет окончательный результат (используйте что-то вроде debounce или throttle. Эти функции-обертки призывают к действию сразу после периода времени с последнего вызова .) Объясните функции: https://medium.com/walkme-engineering/debounce-and-throttle-in-real-life-scenarios-1cc7e2e38c68 Используйте библиотеку lodash и не реализуйте ее самостоятельно, это облегчит вам задачу.
вариант 2) используйте кнопку «отправить» - когда пользователь нажимает кнопку «сохранить» в модальном, отправляется запрос Ajax или призыв к действию для распространения желаемого результата в модальный контейнер.
Я столкнулся с той же проблемой, и, возможно, это более простой подход:
Ключевым моментом является поддержание внутреннего состояния для этого компонента ползунка и отправка желаемого значения через onChange во время onAfterChange.
const MouseUpSlider = ({ value, onChange, ...rest }) => {
const [val, setVal] = useState(value)
return (
<Slider
value = {val}
onAfterChange = {(value) => onChange(value)}
onChange = {(value) => setVal(value)}
{...rest}
/>
)
}
Спасибо за помощь @ U.Rush. Итак, приведенный вами пример решает проблему, но вы рекомендуете никогда не делать этого таким образом - верно? Причина моего вопроса в том, что я делаю вызов Ajax в onValuesChange, поэтому хотел бы, чтобы он просто выполнял один вызов при отпускании мыши, а не множество запросов, пока ползунок перетаскивается