使用 React 使整个 div 表现为复选框

Question

我遇到了显示复选框列表的情况。在这里，我希望整个 div 充当复选框。目前它仅适用于 checkbox 和 label 。相反，我希望整个 div 成为 checked/unchecked.

不胜感激

沙盒：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);

styles.css

.menu-item-holder {
  border: 1px solid #ccc;
  width: 150px;
}
.menu-item {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

Answer 1

只需增加父级宽度的标签宽度即可。在 styles.css、

下方添加 css

.ui.checkbox input.hidden+label {
  width:150px;
}

Answer 2

只需在 .ui.checkbox 中添加一个宽度即可。

.ui.checkbox {
   width: 100%;
}

使用 React 使整个 div 表现为复选框

Making the entire div to behave as a checkbox using React

html

javascript

css

reactjs

semantic-ui-react

代码

styles.css