如何将React函数组件中可用的MUI Range Slider正确实现在React类组件中

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 class RangeSlider extends React.Component {
  // 初始化状态，对应函数组件的useState
  state = {
    value: [20, 37]
  };

  // 滑块值变化处理函数，箭头函数自动绑定this
  handleChange = (event, newValue) => {
    this.setState({
      value: newValue
    });
  };

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

核心改动点说明 #

• 函数组件改为继承React.Component的类组件，渲染逻辑放在render方法中返回
• 原来useState声明的响应式状态，改为在类的state属性中初始化，取值时通过this.state.value读取
• 状态更新操作从原来的setValue改为调用类组件内置的this.setState方法修改对应字段
• 事件处理函数用箭头函数写法，可避免手动绑定this的问题；如果你的项目不支持类属性语法，可改用constructor初始化+手动绑定this的写法：

constructor(props) {
  super(props);
  this.state = {
    value: [20, 37]
  };
  // 手动绑定this
  this.handleChange = this.handleChange.bind(this);
}

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

内容的提问来源于stack exchange，提问作者Cult of Tranquility