Reactjs 从开关加载组件时不拖动材质UI滑块

我正在开发一个功能，其中有一组单选按钮可以更改状态并确定哪些组件应处于活动状态。我想我很接近了，所有的值都设置好了，但是滑块不会滑动，你必须点击它来定位。我有一个沙箱，里面有我在这里谈论的东西：

您将看到收音机显示相应的滑块。如果单击“测试”按钮，可以看到对象设置了正确的值。我还在switch render方法之外添加了另一个滑块，您可以看到它按预期工作

这里还有我正在使用的代码

    import React, { Fragment, useState } from "react";
    import {
      Radio,
      RadioGroup,
      FormControlLabel,
      FormControl,
      Typography,
      Slider,
      Button
    } from "@material-ui/core/";

    export default function CreateForm() {
      const defaultValues = {
        a: 0,
        b: 0,
        c: 0
      };

      const [radioValue, setValue] = useState("");
      const [activity, setActivity] = useState(defaultValues);

      const handleRadioChange = (e) => {
        const { value } = e.target;
        setValue(value);
        setActivity(defaultValues);
      };

      const handleSlider = (name) => (e, value) => {
        setActivity({
          ...activity,
          [name]: value
        });
      };

      function RadioButtonsGroup() {
        return (
          <RadioGroup
            aria-label="group"
            name="group"
            value={radioValue}
            onChange={handleRadioChange}
            row
          >
            <FormControlLabel
              name="group"
              value="a"
              control={<Radio />}
              label="A"
            />
            <FormControlLabel
              name="group"
              value="b"
              control={<Radio />}
              label="B"
            />
          </RadioGroup>
        );
      }

      function test() {
        console.log(activity);
      }

      function RenderSwitch(radioValue) {
        switch (radioValue.value) {
          case "a":
            return <GetA />;
          case "b":
            return <GetB />;
          default:
            return <p>Select Radio</p>;
        }
      }

      function GetA() {
        return (
          <React.Fragment>
            <Typography id="discrete-slider" gutterBottom>
              A
            </Typography>

            <Slider
              value={activity.a}
              aria-labelledby="discrete-slider"
              valueLabelDisplay="auto"
              step={10}
              marks
              min={10}
              max={120}
              name="a"
              onChange={handleSlider("a")}
              style={{ marginBottom: "20px" }}
            />
          </React.Fragment>
        );
      }

      function GetB() {
        return (
          <Fragment>
            <Typography id="discrete-slider" gutterBottom>
              B
            </Typography>

            <Slider
              value={activity.b}
              aria-labelledby="discrete-slider"
              valueLabelDisplay="auto"
              step={10}
              marks
              min={10}
              max={120}
              name="a"
              onChange={handleSlider("b")}
              style={{ marginBottom: "20px" }}
            />
          </Fragment>
        );
      }

      return (
        <>
          <form noValidate onSubmit={(e) => e.preventDefault()}>
            <FormControl>
              <RadioButtonsGroup />
              <RenderSwitch value={radioValue} />
              <Button
                fullWidth
                variant="contained"
                color="primary"
                type="submit"
                onClick={test}
              >
                TEST
              </Button>

              <Typography
                style={{ marginTop: "40px" }}
                id="discrete-slider"
                gutterBottom
              >
                One more to show how drag works here
              </Typography>

              <Slider
                value={activity.c}
                aria-labelledby="discrete-slider"
                valueLabelDisplay="auto"
                step={10}
                marks
                min={10}
                max={120}
                name="c"
                onChange={handleSlider("c")}
              />
            </FormControl>
          </form>
        </>
      );
    }

import React，{Fragment，useState}来自“React”；
进口{
电台，
放射组，
FormControlLabel，
FormControl，
排版，
滑块，
按钮
}来自“@material ui/core/”；
导出默认函数CreateForm（）{
常量默认值={
答:0,，
b:0，
c:0
};
常量[radioValue，setValue]=使用状态（“”）；
const[activity，setActivity]=useState（默认值）；
常数handleRadioChange=（e）=>{
const{value}=e.target；
设置值（值）；
设置活动（默认值）；
};
常量handleSlider=（名称）=>（e，值）=>{
setActivity({
…活动，
[名称]：值
});
};
函数RadioButtonsGroup（）{
返回(
);
}
功能测试（）{
console.log（活动）；
}
函数渲染器开关（radioValue）{
开关（radioValue.value）{
案例“a”：
返回；
案例“b”：
返回；
违约：
返回选择收音机
；
}
}
函数GetA（）{
返回(
A.
);
}
函数GetB（）{
返回(
B
);
}
返回(
e、 preventDefault（）}>
试验
这里还有一个演示拖动是如何工作的
);
}

您必须在滑块自身的元素内处理滑块的状态更改，例如（）：

const SliderA=（）=>{
const[activity，setActivity]=useState（0）；
常量handleChange=（事件，newValue）=>{
setActivity（新值）；
};
返回(
A.
);
};

谢谢你，codemonkey@扎克，这只是梅的一种奇怪行为。从表面上看，您的代码应该运行良好。事实上，如果您只需将这些滑块元素直接复制并粘贴到return中，它们就可以工作。然而，如果你把它们放在它们自己的元素中，它会表现得很怪异；这有点管用。6个月前我也遇到过同样的问题，我唯一能找到的就是梅的行为有时很神秘。谢谢你，我只是在学习如何反应并感谢你的帮助。梅以不同的方式在下拉列表中表现得很怪异，所以可能很快会在这里发布另一个问题：）

const SliderA = () => {
  const [activity, setActivity] = useState(0);

  const handleChange = (event, newValue) => {
    setActivity(newValue);
  };

  return (
    <React.Fragment>
      <Typography id="discrete-slider" gutterBottom>
        A
      </Typography>

      <Slider
        value={activity}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="auto"
        step={10}
        marks
        min={10}
        max={120}
        name="a"
        onChange={handleChange}
        style={{ marginBottom: "20px" }}
      />
    </React.Fragment>
  );
};