Question

我希望一个React组件中的多个material-ui滑块共享一个公共事件处理程序。但是，要使其工作，我需要确定原始滑块。从API documentation中我看不到它是如何实现的。我尝试将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，然后使用{{ 1}}。整个event.target.id方法如下所示：
```
handleChange
```
然后将滑块的名称直接传递给handleChange = (e, value) => { this.setState({ [e.target.id]: value }); }方法，就像这样：
```
handleChange
```

总体而言，您的组件应为：

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

查看实际情况：https://codesandbox.io/s/4qz8o01qp4

编辑：运行代码后，我发现＃1无效，因为id属性未传递给事件目标

如何确定反应中的material-ui滑块？

1 个答案: