时间戳

首页 > 解决方案 > 在 React 类中实现 Slider

javascript - 在 React 类中实现 Slider

问题描述

我有一个当前在反应功能组件中工作的滑块。我想知道如何在 React 类组件中正确实现下面的滑块？

import * as React from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

function valuetext(value) {
  return `${value}°C`;
}

export default function RangeSlider() {
  const [value, setValue] = React.useState([20, 37]);

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

  return (
    <Box sx={{ width: 300 }}>
      <br /><br />
      <Slider
        getAriaLabel={() => 'Temperature range'}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="on"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

标签： javascriptreactjsmaterial-ui

解决方案

专注于类组件，您将必须：

  • 使用this.state而不是React.useState
  • 您将需要使用构造函数（并绑定handleChange函数）
  • 就这样

你有一个代码沙箱在这里工作：https ://codesandbox.io/s/clever-wildflower-kzjck?file=/src/ClassSlider.js

就像：

function valuetext(value) {
  return `${value}°C`;
}

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: [20, 37] };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event, newValue) {
    this.setState({
      value: newValue
    });
  }

  render() {
    return (
      <Box sx={{ width: 300 }}>
        <br />
        <br />
        <Slider
          getAriaLabel={() => "Temperature range"}
          value={this.state.value}
          onChange={this.handleChange}
          valueLabelDisplay="on"
          getAriaValueText={valuetext}
        />
      </Box>
    );
  }
}

export default ClassComponent;

推荐阅读