如何从DOM确定Material-UI切换按钮的开/关状态？

Question

检查http://www.material-ui.com/#/components/toggle上的切换按钮，可以在DOM中找到一个类型为'checkbox'的输入标签。'默认切换'具有属性'checked'，但当我将其转换为OFF状态时，底层'input'标记中的属性不会更改，'checked'仍然存在。 如何从DOM确定切换ON/OFF状态？

附注： 我正在使用Selenium Web Driver编写自动化功能测试。

- Krzysztof

Answer 1

如果您可以为每个切换按钮分配自定义的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}
/>

- Brandon

Answer 2

你不能直接从DOM中检查开关状态。你必须使用JavaScript回调函数来确定开关是否打开或关闭。

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。

- Felipe Elías Lolas Isuani

---

我正在使用Selenium Web Driver编写自动化功能测试，但我无法访问React组件，因此需要从DOM中确定切换状态。 - Krzysztof

为什么要使用Selenium？React基于虚拟DOM，您可以使用Jest来测试组件。不管怎样，请查看以下答案：如何使用Selenium测试ReactJS Web应用程序。 - Felipe Elías Lolas Isuani

这并没有为问题提供真正的答案。 - calbertts

这也不是一个正确的回调，应该是 this.setState({toggled: !this.state.Toggled}, ()=>console.log(this.state.Toggled)) - high incompetance