在复选框上显示组件单击反应

Question

Hello i'm new to react and I have a problem regarding checkbox click handling in react. I want to show a div when a check box is checked and remove the div if the checkbox is unchecked.

The way I have done this only shows the div when the checkbox is clicked but it does not remove the div when it is unchecked. How can I do this in react?

class QuestionOverlay extends Component {

    constructor() {

        super();

        this.showComments = this.showComments.bind(this);

        this.state = {

            showComponent: false,
        };

    }


    showComments = (e) => {

        this.setState({

            showComponent: true,

        });

    }

    render() {

           return (

                <div className="add_checkbox">

                   <span>Enable Comments</span>
                   <input className="checkbox" type="checkbox" name="enable_comment" onClick={this.showComments} value="enable_comment"/>

                </div>



                {this.state.showComponent ? <div  className="comments_preview_sample"></div> : null}

        )
    }
}

Answer 1

Reason is you are always setting the value of showComponent=true , you need to reset the state variable when the checkbox is unchecked, Use this:

showComments(e){

    this.setState({
        showComponent: e.target.checked,
    });

}

Check the working fiddle: https://jsfiddle.net/mrqutgbz/

Few things you need to change:

*You are returning 2 element from render , one div and one more div from conditional rendering . We can't return more than one html element from render , so put the conditional rendering in the main div .

*You are binding the showComments method twice, one in constructor and another by using arrow , remove the arrow , that is not required.

*Div that you are rendering on condition is empty, put some content in that.

Answer 2

You need to change your onClick listener to onChange . Then, rename showComments to toggleComments and implement it like so:

toggleComments(e) {
  this.setState({ showComponent: e.target.checked });
}

Answer 3

Here are several syntax error in your code:

1. Function defined in a class can't use = way.
2. React render function need a root container like div tag.

 const { Component } = React; const { render } = ReactDOM; class QuestionOverlay extends Component { constructor(props) { super(props); this.state = { showComponent: false } this.showComments = this.showComments.bind(this); } showComments() { this.setState({ showComponent: !this.state.showComponent }); } render() { return ( <div> <div className="add_checkbox"> Enable Comments <br/> <input type="checkbox" onClick={this.showComments} /> </div> {this.state.showComponent ? <div className="comments_preview_sample">comments</div> : null} </div> ); } } render( <QuestionOverlay />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>