Question

检查http://www.material-ui.com/#/components/toggle上的切换，DOM中有一个类型为'checkbox'的输入标记。 “默认切换”具有“已检查”属性，但当我将其设置为“关闭”状态时，“输入”标签中的属性不会更改，并且“已检查”仍然存在。如何确定从DOM切换ON / OFF状态？

P.S。我正在使用Selenium Web驱动程序编写自动化功能测试。

Answer 1

如果您可以为每个data-*分配自定义toggle道具，请尝试以下操作：

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}
/>

Answer 2

您不直接从DOM检查切换状态。您必须使用javascript回调来确定切换开关是打开还是关闭。

Class ToggleComponent示例

      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

如何确定Material-UI从DOM切换ON / OFF状态？

2 个答案: