#javascript #reactjs #algorithm #material-ui
#javascript #reactjs #алгоритм #материал-пользовательский интерфейс
Вопрос:
Как вы видите, я хочу сделать слайд с 2 метками, который представляет цену между 2 значениями и обрабатывает ее на слайде. Я связал ввод с помощью ползунка, но ползунок для ввода не работает. Я попытался реализовать эту функцию на onchange слайдера. Мне нужно отображать обе данные отдельно в текстовых полях «От» и «До». Ссылка на проект здесь
Основная проблема здесь в функции. Алгоритм работает плохо, может быть, вы могли бы предложить лучшее решение:
const handleSliderFrom = (event, newValue) => {
if (newValue[0]) {
if (newValue[0] === 0) {
setState({ ...state, priceFrom: 15000 });
} else if (newValue[0] === 20) {
setState({ ...state, priceFrom: 50000 });
} else if (newValue[0] === 40) {
setState({ ...state, priceFrom: 100000 });
} else if (newValue[0] === 60) {
setState({ ...state, priceFrom: 200000 });
} else if (newValue[0] === 80) {
setState({ ...state, priceFrom: 500000 });
} else if (newValue[0] === 100) {
setState({ ...state, priceFrom: 1000000 });
}
} else if(newValue[1]){
if (newValue[1] === 0) {
setState({ ...state, priceTo: 15000 });
} else if (newValue[1] === 20) {
setState({ ...state, priceTo: 50000 });
} else if (newValue[1] === 40) {
setState({ ...state, priceTo: 100000 });
} else if (newValue[1] === 60) {
setState({ ...state, priceTo: 200000 });
} else if (newValue[1] === 80) {
setState({ ...state, priceTo: 500000 });
} else if (newValue[1] === 100) {
setState({ ...state, priceTo: 1000000 });
}
}
};
Ответ №1:
Я увидел 3 основные проблемы в вашем коде:
1 — Ваши условия
if (newValue[0]) {
и
if (newValue[1]) {
Если значение newValue[0] или newValue[1] равно 0, вы не будете вводить в этих условиях, поэтому с вашим фактическим кодом вы не можете установить значение 0.
2 — У вас есть много условий, когда вы могли бы использовать массив меток для получения scaledValue из значения.
3 — Вы сохраняете минимальные и максимальные цены в 2 разных местах:
- fromPriceInput и toPriceInput
- state.priceFrom и state.priceTo
Поскольку третья проблема не связана с вашим вопросом, я не буду освещать ее в своем ответе.
Я упростил вашу функцию, охватив первые 2 пункта:
const handleSliderFrom = (event, newValue) => {
const newPriceFrom = marks.find((mark) => mark.value == newValue[0])
?.scaledValue; // search the mark with a value of newValue[0] and returns the scaleValue of this mark
const newPriceTo = marks.find((mark) => mark.value == newValue[1])
?.scaledValue; // search the mark with a value of newValue[1] and returns the scaleValue of this mark
setState({ priceFrom: newPriceFrom, priceTo: newPriceTo }); // set the store with your new minimum and maximum values (no need to do it one by one, you method will always recieve both)
};
https://codesandbox.io/s/reverent-hellman-rtdl3?file=/src/App.js:2772-3375