[英]Making the entire div to behave as a checkbox using React
I am having this condition where I display a list of checkboxes . 我在这种情况下会显示复选框列表。 Here I want the entire div to act as a checkbox. 在这里,我希望整个div都充当一个复选框。 Currently it works only on the checkbox and the label . 当前,它仅适用于复选框和标签。 Instead I want the entire div to be made checked/unchecked. 相反,我希望整个div被选中/取消选中。
Help would be appreciated 帮助将不胜感激
Sandbox: https://codesandbox.io/s/modest-meninsky-9lcmb 沙箱: https : //codesandbox.io/s/modest-meninsky-9lcmb
import React from "react";
import ReactDOM from "react-dom";
import { Checkbox } from "semantic-ui-react";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ display: "CB1", checked: false, name: "cb1" },
{ display: "CB2", checked: false, name: "cb2" },
{ display: "CB3", checked: false, name: "cb3" }
]
};
}
handleItemClick = (event, data) => {
const index = this.state.data.findIndex(item => item.name === data.name);
const optionsArr = this.state.data.map((prevState, i) =>
i === index
? {
display: prevState.display,
name: prevState.name,
checked: !prevState.checked
}
: prevState
);
this.setState({ data: optionsArr });
};
render() {
return (
<div>
<div className="menu-item-holder">
{this.state.data.map((item, i) => (
<div className="menu-item" key={i}>
<Checkbox
onChange={this.handleItemClick}
checked={item.checked}
label={item.display}
name={item.name}
/>
</div>
))}
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.menu-item-holder {
border: 1px solid #ccc;
width: 150px;
}
.menu-item {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
Just increase the width of label with parent width. 只需使用父宽度增加标签的宽度。 Add below css in styles.css, 在styles.css中的css下方添加,
.ui.checkbox input.hidden+label {
width:150px;
}
Just add a width to .ui.checkbox
. 只需为.ui.checkbox
添加一个宽度。
.ui.checkbox {
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.