Javascript 我需要更改滑块值，并在其提交时发送它

我需要更改并存储滑块的值意味着一些来自后端的值，我正在以滑块中显示的状态存储它，但是如果我更改滑块值（例如第一个值），我需要设置的是partialNameMatchThreshold:40，我将其更改为partialNameMatchThreshold:50，然后当我提交它时，无论我更改了什么，vale都需要提交的意思是partialNameMatchThreshold:50，需要提交，但发生了什么，我的方案，价值不更新，你们可以看到我创建的updateSlider函数，并检查代码沙盒链接我添加打击

partialNameMatchThreshold: 40,
dOBMatchThreshold: 100

const useStyles=makeStyles（（主题）=>({
格式文本：{
显示：“flex”，
对齐项目：“中心”，
marginLeft：主题。间距（-2）
}
}));
常数标记=[
{
数值：0
},
{
价值：20
},
{
价值：40
},
{
价值：60
},
{
价值：80
},
{
数值：100
}
];
函数值文本（值）{
返回`${value}°C`；
}
函数值LabelFormat（值）{
返回marks.findIndex（（mark）=>mark.value==value）+2；
}
函数值LabelFormatDB（值）{
返回marks.findIndex（（marks）=>marks.value==value）+1；
}
const validationSchema=Yup.object（）.shape({
listType:Yup.array（）
.of（Yup.string（））
.min（1，“必选！”）
.required（“required！”），
开始日期：Yup.string（）.required（“required！”），
结束日期：Yup.string（）.required（“required！”）
});
常量fetchSearchRule={
用户：0，
partialNameMatch：对，
partialNameMatchThreshold:40，
多比赛：是的，
最低限额：100
};
导出默认函数App（）{
const classes=useStyles（）；
常量[changeRuleSettings，setChangeRuleSettings]=React.useState（false）；
const[rules，setRules]=React.useState（fetchSearchRule）；
//React.useffect（（）=>{
// }, []);
const ruleForm=useFormik({
初始值：{
形式：规则，
ManagerSetupFormityValue:{}，
changeRuleSettings:false，
FormChangeCount:0
},
//验证模式，
onSubmit：（值）=>{
警报（JSON.stringify（values.SetupForm，null，2））；
//初始值（值）；
}
});
const[value，setValue]=useState（ruleForm.initialValues）；
常量handleCheckBoxChange=（e）=>{
设定规则({
…规则，
[e.target.name]：！规则[e.target.name]
});
value.FormChangeCount=1；
};
const updateSlider=（e，newDays）=>{
如果（e.target.name==“partialDOBMatchThreshold”）{
设定规则({
…规则，
名称：e.target.name，值：newDays，
});
value.FormChangeCount=1；
}否则{
设定规则({
…规则，
名称：e.target.name，值：newDays，
});
value.FormChangeCount=1；
}
};
const style=changeRuleSettings
？{光标：“指针”}
：{游标：“不允许”}；
返回(
部分匹配
{rules.partialNameMatch&&(
)}
D.O.B规则
日期匹配
{rules.DOBMatch&&(
)}
变化
);
}

---

问题是您使用两种不同的状态来处理表单。Formik使用自己的状态，并且不知道应用程序的状态。如果你决定坚持使用Formik，你应该重构你的组件，从你的SetupForm对象而不是从应用程序状态中获取你的输入值

在Formik文档中，他们教授如何将其与材质UI挂钩：

但基本上，您应该更改引用以将它们指向您的规则表单，如下所示：

<Checkbox
  name="SetupForm.DOBMatch"
  style={style}
  checked={ruleForm.values.SetupForm.DOBMatch}
  onChange={ruleForm.handleChange}
  color="primary"
  inputProps={{ "aria-label": "secondary checkbox" }}
/>

---

请注意，如果您想根据复选框的状态有条件地显示滑块，您还应该在应用程序上处理复选框的状态，因为更新您的规则表单对象不会导致在应用程序上重新渲染。

我不知道Formik，但它看起来像是表单元素和接口之间的中间件。因此，在我看来，您的值没有被更新，因为您对输入逻辑使用了不同的处理程序。我想说，Formik无法跟踪材料元素的状态。当您在应用程序状态上记录更改时，为什么不使用您自己的提交逻辑处理？您是否尝试过使用带有正常输入的Formik来检查它是否正确连接到表单状态？是的，它进入状态，但它没有在partialDOBMatchThreshold中存储值。这意味着如果我更改滑块，那么当我提交它时，它会显示另一个变量名称值并存储值变量OK中的值得到了它，但如果后端为true，则默认情况下不会选中它，如果我这样设置checked={ruleForm.values.SetupForm.DOBMatch}我已尝试在您的沙盒上复制它，是的，由于某种原因，material ui没有将name属性传递给事件的目标，这似乎是有问题的。我发现一些用户对此表示不满。。。我不知道，如果它真的不能像预期的那样工作，也许可以尝试在Formik或Material UI之间进行选择…：/

<Checkbox
  name="SetupForm.DOBMatch"
  style={style}
  checked={ruleForm.values.SetupForm.DOBMatch}
  onChange={ruleForm.handleChange}
  color="primary"
  inputProps={{ "aria-label": "secondary checkbox" }}
/>