Question

我正在使用React.js和Material-UI组件库构建一个多步骤表单（调查）。在使用滑块的步骤中，组件不会更新状态。我试图从React.useState（）和其他各种方法中使用setValue设置值。没有解决。有人知道问题出在哪里吗？我被卡住了。

以下是Codesandox的链接：project's code

Slider组件的代码：

import React from 'react';
import { Slider, Input } from '@material-ui/core/';


export default function DiscreteSlider({ values, handleChange }) {
  const [value, setValue] = React.useState(values.areaSpace);

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

  const handleInputChange = event => {
    setValue(event.target.value === '' ? '' : Number(event.target.value));
  };

  const handleBlur = () => {
    if (value < 0) {
      setValue(0);
    } else if (value > 100) {
      setValue(100);
    }
  };

  return (
    <div onChange={handleChange('areaSpace')} style={{marginTop: '20px', marginBottom: '20px'}}>
      <Input
        value={value}
        margin="dense"
        onChange={handleInputChange}
        onBlur={handleBlur}
        inputProps={{
          step: 1,
          min: 0,
          max: 800,
          type: 'number',
          'aria-labelledby': 'input-slider',
        }}
      />
      <Slider
        style={{marginTop: '20px'}}
        value={typeof value === 'number' ? value : 0}
        onChange={handleSliderChange}
        aria-labelledby="input-slider"
        step={1}
        min={0}
        max={800}
        onChangeCommitted={handleChange}
      />
    </div>
  );
}

React Material UI-使滑块更新状态

0 个答案: