无法将滑块标记链接到 TextField - Material UI

Question

如您所见，我想制作带有 2 个标记的幻灯片，代表 2 个值之间的价格，并在幻灯片上处理它。我将输入与滑块链接，但输入的滑块不起作用。我试图在 Slider 的 onchange 上实现这个功能。我需要在“发件人”和“收件人”文本字段上分别显示这两个数据。 Project link is here

主要问题出在功能上。算法效果不好，也许你可以给出更好的解决方案：

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

Answer 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