如何在反应中识别材料 UI 滑块?

2022-01-24 00:00:00 reactjs slider javascript material-ui

我希望一个 react 组件中的多个 material-ui 滑块共享一个公共事件处理程序.但是,要完成这项工作,我需要识别原始滑块.从 API 文档 我看不出这是如何实现的.我尝试将 idname 属性应用于 <Slider>-组件,但在合成事件中没有看到这些在事件处理程序中.

I want multiple material-ui sliders in one react component sharing a common event handler. However, to make this work, I would need to identify the originating slider. From the API documentation I can't see how that is achieved. I've tried applying id and name attributes to the <Slider>-component, yet I'm not seeing these in the synthesized event in the event handler.

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>
  );
}

这是从官方演示项目中获取的:

This is fetched from the official demo project:

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

任何帮助将不胜感激!

推荐答案

你可以像这样格式化你的状态:

You can format your state like so:

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

之后,当滑块的值改变时,你有两种方式来设置状态:

After that, you have 2 ways to set the state when the value of the slider is changed:

  • (更新:这个方法不起作用!不过我会留在这里以备将来参考)通过使用HTML属性id,然后通过使用 event.target.id.整个 handleChange 方法如下所示:

  • (Update: This method doesn't work! However I will leave it here for future reference) By using HTML attribute id, then access it by using event.target.id. The whole handleChange method would look like this:

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

  • 通过将滑块的名称直接传递给 handleChange 方法,它会是这样的:

  • By passing then name of the slider straight to the handleChange method, and it would be like this:

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

  • 总的来说,你的组件应该是:

    Overall, your component should be:

    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 属性没有被传递给事件目标

    After running the code I found that the #1 doesn't work because the id attribute is not being passed down to the event target

    相关文章