reactjs - 从开关加载组件时，Material-UI Slider 不拖动

Question

我正在研究具有一组单选按钮的功能，这些单选按钮可以更改状态并确定哪些组件应该处于事件状态。我想我已经很接近了，所有的值都按应有的方式设置了，但是 slider 不会滑动，您必须将其单击到位。我有一个我在这里谈论的内容的沙盒:

https://codesandbox.io/s/elated-banach-k1i4y?file=/src/Form.js

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

这也是我正在使用的代码

    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>
        </>
      );
    }

Answer 1

您必须像这样 ( Sandbox ) 处理 slider 在其自身元素内的状态变化:

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>
  );
};