vendredi 9 juin 2017

Getting the value of checkbox in reactjs

I'm trying to render components based on the checkbox selection. My approach was as following.

class ReportMainCat extends Component {

    constructor(props) {
        super(props);

            this.report_next = this.report_next.bind(this);

    };

    report_next(){

        if(this.refs.sexual.checked) {

            return <PostOptionBar/>

        }

    }

    render() {

        return (

            <div className="text_align_left">

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox"  ref="sexual"/>
                    <a>Sexual Content</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="selfharm"/>
                    <a>Threat or self harm</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="abuse"/>
                    <a>Abuse or bullying</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="illegal"/>
                    <a>Illegal substances</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="discrimination"/>
                    <a>Discrimination</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="copyright"/>
                    <a>Copyright or spam</a>
                </div>

                <div className="width_100 margin_bottom10px">
                    <input type="checkbox" ref="nopermission"/>
                    <a>Humiliating,embarassing or posted without permission</a>
                </div>

                <button className="float_right" onClick={this.report_next}>Next</button>

                {this.report_next()}

            </div>


        )


    }
}

I'm checking if the checkbox is checked and render the component accordingly. But i keep getting this error

Uncaught TypeError: Cannot read property 'checked' of undefined

How do i fix this? Or is this the best approach to do what i want to do.




Aucun commentaire:

Enregistrer un commentaire