在 React.js 中为 Range Slider 创建 onChange 函数答案

【问题标题】：Creating onChange function for Range Slider in React.js在 React.js 中为 Range Slider 创建 onChange 函数
【发布时间】：2020-12-02 08:05:08
【问题描述】：

我正在尝试使用 react.js 中范围滑块的 onChange 事件淡化文本。

正如您在附图中看到的，例如，当我点击 2(s) 时，“This is Video Title”的文本行应该在 2(s) 过去后淡出。

问题是，我无法理解如何将范围滑块标签的对应值链接为 onChange 函数以淡化文本。（之前，我使用按钮单击事件执行相同的目标，但现在我需要使用范围滑块来执行此操作）。希望你能理解我的问题。

以下是我在这方面的工作文件。而且，我恳请您在这方面提供帮助。非常感谢。

（在App.js中，我使用Switch case通过相关标签捕获了0s，2s，5s，7s和10s的设定时间值。但是，我不确定这是否是正确的方法。请考虑一下，App.js 已经完成了一半，这就是我被困了几个小时的地方。

在DiscreteSlider.js中，我给marks赋值了不同的值，请忽略set值与标签的对应关系。）

App.js

import React, { useEffect, useState } from "react";
import "./App.css";
import DiscreteSlider from "./DiscreteSlider.js";

function App() {
  const [time, setTime] = useState(0);
  const [showText, setShowText] = useState(true);

  const textFadeOutTimer = (e) => {
    switch (e.target.value) {
      case "0":
        setTime(0);
        break;
      case "20":
        setTime(2000);
        break;
      case "40":
        setTime(5000);
        break;
      case "70":
        setTime(7000);
        break;
      case "100":
        setTime(10000);
        break;
    }
  };
  useEffect(() => {
    if (time !== 0) {
      const timeout = setTimeout(() => {
        setShowText(false);
      }, time);
      return () => clearInterval(timeout);
    }
  }, [time]);

  const textFader = () => {
    setShowText(false);
  };

  return (
    <>
      <div className={showText ? "showTextOn" : "showTextOff"}>
        This is Video Title
      </div>
      
      
    </>
  );
}

export default App;

DiscreteSlider.js

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

const useStyles = makeStyles({
  root: {
    width: 500,
  },
});

const marks = [
  {
    value: 0,
    label: "0(s)",
  },
  {
    value: 20,
    label: "2(s)",
  },
  {
    value: 40,
    label: "5(s)",
  },
  {
    value: 70,
    label: "7(s)",
  },
  {
    value: 100,
    label: "10(s)",
  },
];

function DiscreteSlider(props) {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
    props.onChange(newValue);
  };

  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Slider
        defaultValue={0}
        step={null}
        marks={marks}
        onChange={handleChange}
      />
    </div>
  );
}

export default DiscreteSlider;

【问题讨论】：

这个答案对你有帮助吗？
欢迎来到 Stack Overflow。请看，What should I do when someone answers my question? 也可以通过tour 来熟悉如何使用这个平台。
@SatishPai 看起来此人有不接受答案的历史。
@PraveenKumarPurushothaman 至少这个家伙的评论就足够了:)

标签： reactjs rangeslider

【解决方案1】：

要淡化文本，您可以使用 CSS 中的 opacity 样式来处理 HTML 元素。

为 DiscreteSlider 组件提供事件并在 App 组件中使用该事件。

创建一个新状态。

  const [Opa, setOpa] = useState(0);

在 App 组件 onChangeApp 中创建了一个新方法

  function onChangeApp(value) {
    setOpa(value / 100);
  }

App组件的返回方法

   return (
    <>
      <div style={{ opacity: Opa }}>This is Video Title</div>
      <DiscreteSlider onChange={onChangeApp} />
    </>
  );

您可以在我为此创建的 stackblitz 项目中查看解决方案。 https://stackblitz.com/edit/react-fade-element?file=src/App.js

【讨论】：