javascript - React Material UI - 使 slider 更新状态

Question

我正在使用 React.js 和 Material-UI 构建一个多步骤表单(调查)组件库。在带有 slider 的步骤中，组件不会更新状态。我试图使用 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>
  );
}

Answer 1

在您的Slider上您有以下内容:

        onChangeCommitted={handleChange}

上面的 handleChange 是从 MainForm.js 传递的，它将其定义为:

  // Handle inputs change
  handleChange = input => event => {
    this.setState({ [input]: event.target.value });
  }

当该函数被调用时，它要做的就是返回另一个函数。您需要调用 handleChange("areaSpace") 才能获取一个函数，然后在调用该函数时尝试设置“areaSpace”状态。另一个问题是更改函数从 event.target.value 获取值，但对于 Slider，该值作为第二个参数传递。

以下代码解决了这两个问题:

        onChangeCommitted={(event, value) =>
          handleChange("areaSpace")({ target: { value } })
        }

有更优雅的方法来处理这个问题，但上面的方法解决了问题而不改变任何其他层。它仍然留下了另一个问题，即如果您更改输入而不是 slider ，则areaSpace状态将不会更新，但我将把它作为一个问题留给您解决。