Tengo un control deslizante actualmente trabajando en un componente de función de reacción. Me pregunto cómo puedo implementar el control deslizante a continuación correctamente en un componente de clase 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> ); }Centrado en los componentes de clase, tendrás que:
this.state en lugar de React.useStatehandleChange )Tiene un entorno limitado de código funcionando aquí: https://codesandbox.io/s/clever-wildflower-kzjck?file=/src/ClassSlider.js
Sería como:
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;const minDistance = 10; export default function MinimumDistanceSlider() { const [value, setValue] = React.useState([20, 37]); const handleChange1 = (event, newValue, activeThumb) => { if (!Array.isArray(newValue)) { return; } if (activeThumb === 0) { setValue([Math.min(newValue[0], value[1] - minDistance), value[1]]); } else { setValue([value1[0], Math.max(newValue[1], value[0] + minDistance)]); } };prueba esto