React Material UI - 根据 Slider 值而不是其他方式更新 TextField

编程问答 2022-05-04

问题描述

我想根据滑块的值更新我的 TextField 的值，但我仍然希望该 TextField 可编辑自定义数字，如果输入自定义数字，它会覆盖来自的 TextField 中的值滑块但不更新滑块。

我尝试将 TextField 设置为受控组件，并且能够将滑块的值放入其中，但无法更新它。

我现在已经在同一个 handleChange 事件中获取了 Slider 和 TextField 的值，如何让 TextField 根据 Slider 值更新而不是相反？

    export default function App() {
  
    var sliderVal
    var textFieldVal 
    const handleChange = (event,newValue) => {
    
     if (newValue === undefined) {
          sliderVal = sliderVal;
        } else sliderVal = newValue
    
     if (event.target.value === undefined) {
          textFieldVal = textFieldVal
        } else textFieldVal = event.target.value
    
     };
      const marks = [
        {
          value: 20,label: "20 +"
        },{
          value: 200,label: "200 +"
        }
      ];
      return (
        <div className="App">
          <Slider
            defaultValue={20}
            valueLabeldisplay="auto"
            step={10}
            marks={marks}
            min={20}
            max={200}
            onChange={handleChange}
          />
    
          <TextField
            name="yearlyDelay"
            variant="outlined"
            id="yearlyDelay"
            onChange={handleChange}
          />
        </div>
      );

   }

我在此处附加了一个关于代码和框的可行示例 - Working Example （原谅我刚刚把它放在一起的样式）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formsformsformsjavascriptmaterial-uireactjsreactjsreactjsreactjssliderslider