javascript - 如何在React中识别material-ui slider ？

Question

我希望一个 React 组件中的多个 Material-UI slider 共享一个公共(public)事件处理程序。但是，为了使其工作，我需要识别原始 slider 。来自 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
}

之后，您可以通过两种方式设置 slider 值更改时的状态:

• (更新:这个方法不起作用!但是我将把它留在这里以供将来引用)通过使用 HTML 属性 id，然后通过以下方式访问它使用event.target.id。整个 handleChange 方法如下所示:

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

• 将 slider 的名称直接传递给 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 属性没有传递到事件目标