Как мне определить слайдер материала в интерфейсе?

Question

Я хочу, чтобы несколько ползунков Material-Ui в одном компоненте реакции имели общий обработчик событийОднако, чтобы сделать эту работу, мне нужно будет определить исходный слайдер.Из документации API я не вижу, как это достигается.Я пытался применить атрибуты id и name к <Slider> -компоненту, но я не вижу их в синтезированном событии в обработчике событий.

handleChange = (event, value) => {
  console.log(event); // 'Id' and 'name' attributes in 'target' are empty
  this.setState({ value });
};

render() {
  const { classes } = this.props;
  const { value } = this.state;

  return (
    <div className={classes.root}>
      <Typography id="label">Slider label</Typography>
      <Slider
        classes={{ container: classes.slider }}
        value={value}
        aria-labelledby="label"
        onChange={this.handleChange}
      />
    </div>
  );
}

Это взято из официального демонстрационного проекта:

https://codesandbox.io/s/4j9l9xn1o4

Любая помощь будет принята с благодарностью!

Answer 1

Вы можете отформатировать свое состояние следующим образом:

state = {
  slider1: 50, //slider1 is the name of the first slider
  slider2: 50, //slider2 is the name of the second slider
}

После этого у вас есть 2 способа установить состояние при изменении значения ползунка:

• ( Обновление: Этот метод не работает! Однако я оставлю его здесь для дальнейшего использования) Используя HTML-атрибут id, затем получите доступ к нему с помощью event.target.id.Весь метод handleChange будет выглядеть следующим образом:

  handleChange = (e, value) => {
    this.setState({
      [e.target.id]: value
    });
  }
  

• Если передать имя ползунка прямо методу handleChange, это будет выглядеть так:

  handleChange = name => (e, value) => {
    this.setState({
      [name]: value
    });
  }
  

В целом, ваш компонент должен быть:

class SimpleSlider extends Component {
  state = {
    slider1: 50,
    slider2: 50
  };

  handleChange = name => (e, value) => {
    this.setState({
      [name]: value // --> Important bit here: This is how you set the value of sliders
    });
  };

  render() {
    const { classes } = this.props;
    const { slider1, slider2 } = this.state;

    return (
      <div className={classes.root}>
        <Typography id="label">Slider label</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={slider1}
          aria-labelledby="label"
          onChange={this.handleChange("slider1")}
        />
        <Slider
          classes={{ container: classes.slider }}
          value={slider2}
          aria-labelledby="label"
          onChange={this.handleChange("slider2")}
        />
      </div>
    );
  }
}

Смотреть это в действии: https://codesandbox.io/s/4qz8o01qp4

Редактировать: После запуска кода я обнаружил, что # 1 не работает, потому что атрибут id не передается цели события