Как программно установить флажок Material-UI?

Question

Я использую в своем приложении компонент Checkbox Material-UI вместе с соответствующим ярлыком.

Я бы хотел, чтобы и флажок, и ярлык были кликабельными, но я не могу использовать ихКомпонент FormControlLabel (со свойствами control и label), который обеспечит этот щелчок, потому что я хочу использовать для компонента другой компонент, а не просто текст, а FormControlLabel, похоже, не поддерживает его.

Итак, я думаю о том, чтобы вызвать щелчок чекбокса, когда щелкает компонент метки.Есть ли правильный способ сделать это?

Answer 1

Вы можете обернуть Checkbox обычным label, чтобы метка переключала флажок.

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

Вы также можете управлять Checkbox, используя часть состояния для 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>