如何解决React Material UI - 根据 Slider 值而不是其他方式更新 TextField
我想根据滑块的值更新我的 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 举报,一经查实,本站将立刻删除。