我在我的应用中使用 Material-UI 的 Checkbox
组件以及相关标签。
我希望复选框和标签都可单击,但我无法使用它们的 FormControlLabel
组件(带有 control
和 label
) > 属性),这将确保单击,因为我想使用另一个组件,而不仅仅是文本,作为标签,而 FormControlLabel
似乎不支持它。
因此,我正在考虑在单击标签组件时触发复选框的单击。有正确的方法吗?
最佳答案
您可以用常规标签
包裹复选框
,以使标签切换复选框。
<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>
关于reactjs - 如何以编程方式检查 Material-UI 复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54834113/