Javascript 如何在react中识别材质ui滑块？_Javascript_Reactjs_Slider_Material Ui

Javascript 如何在react中识别材质ui滑块？

javascript reactjs material-ui

Javascript 如何在react中识别材质ui滑块？,javascript,reactjs,slider,material-ui,Javascript,Reactjs,Slider,Material Ui,我希望在一个react组件中有多个材质ui滑块，共享一个公共事件处理程序。但是，要使这项工作正常，我需要识别原始滑块。从长远来看，我看不出这是如何实现的。我已经尝试将id和name属性应用于-组件，但在事件处理程序中的合成事件中没有看到这些属性 handleChange = (event, value) => { console.log(event); // 'Id' and 'name' attributes in 'target' are empty this.setState

我希望在一个react组件中有多个材质ui滑块，共享一个公共事件处理程序。但是，要使这项工作正常，我需要识别原始滑块。从长远来看，我看不出这是如何实现的。我已经尝试将id和name属性应用于-组件，但在事件处理程序中的合成事件中没有看到这些属性

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

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

任何帮助都将不胜感激

您可以这样设置您的状态：

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

之后，有两种方法可以设置滑块值更改时的状态：

更新：此方法无效！不过，我将通过使用HTML属性id将其留在这里供将来参考，然后使用event.target.id访问它。整个handleChange方法如下所示：

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

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

然后将滑块的名称直接传递给handleChange方法，如下所示：

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

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

在行动中看到它：

编辑：运行代码后，我发现1不起作用，因为id属性没有传递给事件目标

您可以这样格式化您的状态：

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