我需要在 onChange 之后设置和发送滑块的值答案

【问题标题】：I need to set and send value of slider after onChange我需要在 onChange 之后设置和发送滑块的值
【发布时间】：2021-08-12 11:45:44
【问题描述】：

我正在使用 PrettoSlider 材质，我需要正确设置更改，因此如果任何值发生更改，我可以提交该值，但是如果我更改某些内容，现在发生的情况意味着如果我单击一次，我将获得 null 如果我在相同的值中单击两次然后值得到打印我需要使用 formik 设置 onChnage 并且需要正确设置字段值所以如果我提交然后该更改值将被提交任何值来更改它存储在 event.target 中。 ariaValueNow 如何正确设置字段值

export default function CustomizedSlider() {
  const classes = useStyles();
  const ruleForm = useFormik({
    initialValues: {
      partialNameMatchThreshold: 40
    },
    enableReinitialize: true,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    }
  });

  return (
    <div className={classes.root}>
      <Typography gutterBottom>pretto.fr</Typography>
      <PrettoSlider
        onChange={(event) => {
          console.log("Number change ", event.target.ariaValueNow);
          ruleForm.setFieldValue(event.target.ariaValueNow);
        }}
        valueLabelDisplay="on"
        aria-label="pretto slider"
        defaultValue={ruleForm.values.partialNameMatchThreshold}
        marks={marks}
        name="partialNameMatchThreshold"
      />
      <Button
        onSubmit={ruleForm.handleSubmit}
        variant="contained"
        color="primary"
        type="submit"
      >
        Commit Changes
      </Button>
    </div>
  );
}

CodeSandBox Link

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

我们不应该使用event 来捕获选定的值。 onChange 方法提供了第二个参数，用于保存实际选择的值。

onChange={(event, newValue) => {

我们需要使用 newValue 而不是事件。

Formik 的 setFieldValue 有 2 个参数，一个是需要更新的字段，另一个是要更新的值。

ruleForm.setFieldValue("partialNameMatchThreshold", newValue);

Slider 组件需要从 Formik 读取值以保持值同步。所以我们需要把滑块做成一个受控组件。将这个新的 value 属性添加到滑块

value={ruleForm.values.partialNameMatchThreshold}

Codesandbox

【讨论】：