反应：带有自定义钩子的滑块无法正常工作

Question

我正在尝试创建一个带有滑块 ui 元素的自定义钩子。我的目标是能够从父元素访问滑块值，以便更新其他一些 ui 部分。

但是，滑块值似乎没有正确更新：当用户尝试拖动滑块工具提示时，它只会移动一步。在 useEffect 被调用后，似乎鼠标事件停止被跟踪。

我能做些什么来解决这个问题并有一个平滑的拖动行为？

这是我的代码（沙箱）：

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';

ReactDOM.render(<Demo />, document.querySelector('#root')); 

演示.js

import React, { useEffect } from "react";
import useSlider from "./slider";

function CustomizedSlider() {
  const [CustomSlider, sliderValue] = useSlider("Slider", 50);

  useEffect(() => {
    console.log("Slider value: " + sliderValue);
  }, [sliderValue]);

  return <CustomSlider />;
}

export default CustomizedSlider;

滑块.js

import React, { useState } from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({...
}));

const PrettoSlider = withStyles({...
})(Slider);

export default function useSlider(label, defaultState) {
  const classes = useStyles();
  const [state, setState] = useState(defaultState);

  const CustomSlider = () => {
    return (
      <Paper className={classes.root}>
        <div className={classes.margin} />
        <Typography gutterBottom>{label}</Typography>
        <PrettoSlider
          valueLabelDisplay="auto"
          aria-label="pretto slider"
          defaultValue={50}
          value={state}
          onChange={(event, v) => {
            setState(v);
          }}
        />
      </Paper>
    );
  };

  return [CustomSlider, state];
}

非常感谢你的帮助！

Answer 1

问题是CustomSlider每次渲染都是一个新的组件类型，因为它每次都是一个独特的功能。这会导致它在每次渲染时卸载/重新安装，而不仅仅是重新渲染，这会导致各种问题（如您所见）。

而不是自定义钩子，我认为你真的只想要一个自定义组件。下面是一种只需对初始代码进行最少更改即可构建它的方法。

演示.js

import React, { useEffect } from "react";
import CustomSlider from "./CustomSlider";

function CustomizedSlider() {
  const [value, setValue] = React.useState(50);

  useEffect(() => {
    console.log("Slider value: " + value);
  }, [value]);

  return <CustomSlider label="Slider" value={value} setValue={setValue} />;
}

export default CustomizedSlider;

自定义滑块.js

import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: 300 + 24 * 2,
    padding: 24
  },
  margin: {
    height: theme.spacing(1)
  }
}));

const PrettoSlider = withStyles({
  root: {
    color: "#a2df77",
    height: 8
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus,&:hover,&$active": {
      boxShadow: "inherit"
    }
  },
  active: {},
  valueLabel: {
    left: "calc(-50% + 4px)"
  },
  track: {
    height: 8,
    borderRadius: 4
  },
  rail: {
    height: 8,
    borderRadius: 4
  }
})(Slider);

const CustomSlider = ({ label, value, setValue }) => {
  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <div className={classes.margin} />
      <Typography gutterBottom>{label}</Typography>
      <PrettoSlider
        valueLabelDisplay="auto"
        aria-label="pretto slider"
        defaultValue={50}
        value={value}
        onChange={(event, v) => {
          setValue(v);
        }}
      />
    </Paper>
  );
};
export default CustomSlider;