gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 01:27:39 24 4
gpt4 key购买 nike

我希望一个 React 组件中的多个 Material-UI slider 共享一个公共(public)事件处理程序。但是,为了使其工作,我需要识别原始 slider 。来自 API documentation我看不出这是如何实现的。我尝试过申请idname属性 <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

任何帮助将不胜感激!

最佳答案

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

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

关于javascript - 如何在React中识别material-ui slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53611848/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com