reactjs - 如何以编程方式检查 Material-UI 复选框？

Question

我在我的应用中使用 Material-UI 的 Checkbox 组件以及相关标签。

我希望复选框和标签都可单击，但我无法使用它们的 FormControlLabel 组件(带有 control 和 label) > 属性)，这将确保单击，因为我想使用另一个组件，而不仅仅是文本，作为标签，而 FormControlLabel 似乎不支持它。

因此，我正在考虑在单击标签组件时触发复选框的单击。有正确的方法吗？

Answer 1

您可以用常规标签包裹复选框，以使标签切换复选框。

<label> Label <Checkbox/></label>;

您还可以通过使用 checked 属性的一段状态来控制复选框，并以编程方式切换它。

const { Checkbox } = window['material-ui'];

class App extends React.Component {
  state = { isChecked: false };

  toggle = () => {
    this.setState(prevState => ({ isChecked: !prevState.isChecked }));
  };

  render() {
    return (
      <div>
        <Checkbox checked={this.state.isChecked} onChange={this.toggle} />
        <button onClick={this.toggle}>Toggle</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script>

<div id="root"></div>