Material UI 中 Slider 组件的 onChange 事件池

Question

我正在尝试通过使用 useState 将值存储在当前数组中来处理 Material UI 滑块的 onChange。如果使用 Name 道具，滑块会卡住，但如果我使用 id 道具，滑块会以一种奇怪的缓慢方式工作。我认为我的问题与事件池有关，在 react docs 处使用 event.persist() 的解决方案解释了这个问题，但我不知道如何将它应用到我的代码中。

这是我的代码：

import React, { useState, useEffect } from 'react';
import Slider from '@material-ui/core/Slider';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getSettings } from '../../actions/settingsActions';
   
const Settings = ({ getSettings, settings, loading }) => {


  React.useEffect(() => {
    getSettings();

    // eslint-disable-next-line
  }, []);

  const [current, setCurrent] = useState({
    ageAtDeath: 50,
    costInflation: 0,
   
  });

  React.useEffect(() => {
    if (!loading) {
      setCurrent({
        ageAtDeath: settings.ageAtDeath,
        costInflation: settings.costInflation,
        
      });
    }
    // eslint-disable-next-line
  }, [settings]);


  const {
    ageAtDeath,
    costInflation,
  } = current;

  const onChange = (event, newValue) => {
    setCurrent({
      ...current,
      [event.target.id]: newValue, //if i use event.target.name the slider is stuck
    });
  };

  
  return (   
              <Slider
                id='ageAtDeath'
                name='ageAtDeath'
                value={ageAtDeath}
                onChange={onChange}
                step={5}
                marks
                min={60}
                max={100}
                valueLabelDisplay='on'
              />
  
  );
};

Settings.propTypes = {
  getSettings: PropTypes.func.isRequired,
  settings: PropTypes.object,
  loading: PropTypes.bool.isRequired,
};

const mapStateToProps = (state) => ({
  settings: state.settings.settings,
  loading: state.settings.loading,
});

export default connect(mapStateToProps, {
  getSettings,
})(Settings);

Answer 1

我按照的回答解决了这个问题。

这是最终代码。

const onChange = (name) => (e, value) => {
    setCurrent({
      ...current,
      [name]: value,
    });
  };

确保在调用 onChange 时添加要更改的值的名称

                   <Slider
                    id='costInflation'
                    name='costInflation'
                    value={costInflation}
                    onChange={onChange('costInflation')}
                    min={0}
                    max={50}
                    valueLabelDisplay='on'
                  />

Material UI 中 Slider 组件的 onChange 事件池

onChange Event Pooling for Slider component in Material UI

onchange

reactjs

material-ui