如果在React JS中选中了复选框，如何隐藏或显示div

您可以这样做：

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 content = this.state.checked       ? <div> Content </div>      : null;    return <div>      <div>        <label>Check</label>        <inputtype="checkbox"checked={ this.state.checked }onChange={ this.handleChange } />      </div>      { content }    </div>;  }}

Example

另外，您可以将

CSS

display

display: none/block;

render() {  const hidden = this.state.checked ? '' : 'hidden';  return <div>    <div>        <label>Check</label>        <inputtype="checkbox"checked={ this.state.checked }onChange={ this.handleChange } />      </div>      <div className={ hidden }>1</div>      <div className={ hidden }>2</div>      <div className={ hidden }>3</div>      <div className="bold">3</div>      <div className={ hidden }>4</div>    </div>;  }

Example