Блог

Я хотел бы обновить свой простой магазин, когда я изменяю значение в компоненте слайдера material-UI. Мне нужно передать идентификатор компонента слайдера, который я изменяю, в мою функцию 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>
  

Только щелчок по элементу root span возвращает цель со значением id при запуске onChange. Есть ли способ заставить ползунок пользовательского интерфейса material возвращать значение идентификатора независимо от того, где я нажимаю на ползунок?

 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,
    'amp;:focus, amp;:hover, amp;$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
  

Временное решение: установите для PointerEvents значение ‘none’ для всех элементов, отличных от root для слайдера:

 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,
    'amp;:focus, amp;:hover, amp;$active': {
      boxShadow: 'inherit',
    },
  },
  active: {},
  valueLabel: {
    left: 'calc(-50%   4px)',
  },
  track: {
    height: '60%',
    borderRadius: 20,
    pointerEvents: 'none'
  },
  rail: {
    height: 8,
    borderRadius: 4,
    pointerEvents: 'none'
  },
})(Slider);