检查http://www.material-ui.com/#/components/toggle 上的切换，DOM 中有一个“复选框”类型的输入标签。 “默认切换”具有“已检查”属性，但是当我将其设置为“关闭”状态时，“输入”标签中的属性不会改变，“已检查”仍然存在。 如何从 DOM 确定切换 ON/OFF 状态？
附言 我正在使用 Selenium Web 驱动程序编写自动化功能测试。
【问题讨论】：
标签： toggle material-ui
如果您可以为每个 toggle 分配自定义 data-* 属性，请尝试以下操作：
handleToggle = (event) => {
// here's your checked Value
event.target.getAttribute('data-isToggled')
}
// ...React boilerplate
<Toggle
label="Toggled by default"
onToggle={this.handleToggle}
data-isToggled={this.state.Toggled}
toggled={this.state.Toggled}
/>
【讨论】：
您不会直接从 DOM 检查切换状态。您必须使用 javascript 回调来确定切换开关是打开还是关闭。
类切换组件示例
export default class ToggleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {Toggled: true};
}
handleToggle() {
this.setState({Toggled: !this.state.Toggled});
console.log(this.state.Toggled)
}
render() {
return (
<div>
<Toggle
label="Toggled by default"
defaultToggled={this.state.Toggled}
onToggle={this.handleToggle.bind(this)}
toggle={this.state.Toggled}
/>
</div>
);
}
}
看：https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
【讨论】：