将 ID 属性传递给 onChange 以获得 materialUI 滑块组件答案

【问题标题】：Pass ID prop to onChange for a materialUI Slider Component将 ID 属性传递给 onChange 以获得 materialUI 滑块组件
【发布时间】：2021-02-14 13:43:31
【问题描述】：

当我更改 Material-UI 滑块组件上的值时，我想更新我的 easy-peasy 商店。我需要将要更改的滑块组件的 id 传递给我的 handleChange 函数，以便我可以指定要更新的商店中的哪个属性。我遇到的问题是 onChange 根据您单击的滑块的哪个部分返回不同的事件目标。

点击铁路返回：

<span class="MuiSlider-rail WithStyles(ForwardRef(Slider))-rail-37"></span>

点击追踪回报：

<span class="MuiSlider-track WithStyles(ForwardRef(Slider))-track-36" style="left: 0%; width: 29%;"></span>

单击包含的跨度返回：

  <span class="MuiSlider-root WithStyles(ForwardRef(Slider))-root-32 MuiSlider-colorPrimary" id="subdivValue0"><span class="MuiSlider-rail WithStyles(ForwardRef(Slider))-rail-37"></span><span class="MuiSlider-track WithStyles(ForwardRef(Slider))-track-36" style="left: 0%; width: 17%;"></span><input type="hidden" value="17"><span class="MuiSlider-thumb WithStyles(ForwardRef(Slider))-thumb-33 MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-38" tabindex="0" role="slider" data-index="0" aria-label="test slider 1" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="17" style="left: 17%;"><span class="PrivateValueLabel-offset-40 MuiSlider-valueLabel WithStyles(ForwardRef(Slider))-valueLabel-35"><span class="PrivateValueLabel-circle-41"><span class="PrivateValueLabel-label-42">17</span></span></span></span></span>

只有在触发 onChange 时单击根 span 元素才会返回具有 id 值的目标。有没有办法让材质 UI 滑块返回 id 值，无论我点击滑块的哪个位置？

import React, { useState, useEffect } from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
import { useStoreState, useStoreActions } from 'easy-peasy'

const PrettoSlider = withStyles({
  root: {
    color: '#52af77',
    height: 8,
  },
  thumb: {
    height: 0,
    width: 0,
    backgroundColor: '#fff',
    border: '2px solid currentColor',
    marginTop: -8,
    marginLeft: -12,
    '&:focus, &:hover, &$active': {
      boxShadow: 'inherit',
    },
  },
  active: {},
  valueLabel: {
    left: 'calc(-50% + 4px)',
  },
  track: {
    height: '60%',
    borderRadius: 4,
  },
  rail: {
    height: 8,
    borderRadius: 4,
  },
})(Slider);

export function SubdivisionControls(props){

  const handleChange = (event, newValue) => {
    console.log(event.target)
    console.log(event.target.id)
    console.log(newValue)
    setStoreVal({id: props.id, targetSliderId: event.target.id})
   };

  const setStoreVal = useStoreActions(actions=> actions.panels.setParameter)

  return(
    <div>
     <PrettoSlider valueLabelDisplay="auto" aria-label="pretto slider 1" defaultValue={20} onChange = {handleChange} id = {'subdivValue0'} />
     <PrettoSlider valueLabelDisplay="auto" aria-label="pretto slider" defaultValue={20} onChange = {handleChange} id = {'subdivValue1'} />
     <PrettoSlider valueLabelDisplay="auto" aria-label="pretto slider" defaultValue={20} onChange = {handleChange} id = {'subdivValue2'} />
    </div>

  )
}

export default SubdivisionControls

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

临时解决方案：对于滑块的除根以外的所有元素，将 pointerEvents 设置为“无”：

const PrettoSlider = withStyles({
  root: {
    color: '#52af77',
    height: 8,
    zIndex: 10,
  },
  thumb: {
    height: 0,
    width: 0,
    backgroundColor: '#fff',
    border: '2px solid currentColor',
    marginTop: -8,
    pointerEvents: 'none',
    marginLeft: -12,
    '&:focus, &:hover, &$active': {
      boxShadow: 'inherit',
    },
  },
  active: {},
  valueLabel: {
    left: 'calc(-50% + 4px)',
  },
  track: {
    height: '60%',
    borderRadius: 20,
    pointerEvents: 'none'
  },
  rail: {
    height: 8,
    borderRadius: 4,
    pointerEvents: 'none'
  },
})(Slider);

【讨论】：