如何使用按钮或外部事件取消选中所有MaterialUI切换组件？

Question

假设您有一个应用程序的多个<Toggle />组件，可以按大小过滤衣服。您切换大小，然后想要通过单击按钮清除所有过滤器，而不是取消选中所有切换。

如何使用material-ui Toggles专门完成这项工作？文档中没有任何内容说明如何使用外部元素（例如按钮）取消选中切换。

Answer 1

对于此功能，您必须维护所有Toggle组件的状态。单击该按钮时，您必须更新所有切换的状态。

例如。

constructor(props) {
  super(props);
    this.state = {
      toggle1: false,
      toggle2: false,
  };
}

uncheckAllToggle = () => {
  this.setState({
    toggle1: false, 
    toggle2: false
  });
}

render() {
  return (
    <div>
      <Toggle
        label="toggle1"
        toggled={this.state.toggle1}
        onToggle={() => this.setState({toggle1: !this.state.toggle1})}
      />
      <Toggle
        label="toggle2"
        toggled={this.state.toggle2}
        onToggle={() => this.setState({toggle2: !this.state.toggle2})}
      />
     <FlatButton
       label={'UnCheck All Toggle'}
       onClick={this.uncheckAllToggle}
     />
    </div>
  )
}