如何处理 2 个复选框来隐藏或显示某些 div React JS

Question

我有这个代码

class Component extends React.Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    this.setState({
        checked: !this.state.checked
    })
  }
  render() {
    const hidden_chk1 = this.state.checked ? 'hidden' : '';
    const hidden_chk2 = this.state.checked ? 'hidden' : '';
    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked } onChange={ this.handleChange } />
      </div>
      <div className={ hidden_chk1 }>show hide div with check 1</div>
      <div className={ hidden_chk2 }>show hide div with check 2</div>
    </div>;
  }
}
ReactDOM.render(
  <Component />,
  document.getElementById('container')
);

这是JSfiddle：https://jsfiddle.net/v5xsawn8/1/

我正在为此苦苦挣扎，无法使其工作，复选框 1 必须仅控制div 检查 1 hidden_chk1，复选框 2 必须控制div 复选框 2 hidden_chk2，它们必须是独立的，提前感谢。

Answer 1

最后，我在这里工作是代码：

.JS

class Componente extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked: false, checked2: false};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
  }  
  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }
  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }
  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';
    return <div>
        <div>
        <label>Check 1</label>
        <input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
        <label>Check 2</label>
        <input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
      </div>
      <div className={ togglecheck1 }>show hide div with check 1</div>
      <div className={ togglecheck2 }>show hide div with check 2</div>
    </div>;
  }
}
ReactDOM.render(
  <Componente />,
  document.getElementById('container')
);

.CSS

.hidden-check1 {  
  display: none;
}
.hidden-check2{
  visibility: hidden;
}

.html

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

在 CSS =>可见性中：隐藏隐藏div 并保留空格和 =>显示：无 隐藏div 并且不保留空间。这是代码笔 http://codepen.io/parlop/pen/EKmaWM谢谢。