mercredi 28 septembre 2016

Checkbox in react js doesn't change

I have main component as follows :

export default class RegistrationFormStepFour extends React.Component{
constructor(props){
    super(props);
    this.state = {
        terms: false,
        emailNotifications: false,
        smsNotifications: false,
        errors: {}
    }
}


handleTerms(event){
    event.preventDefault();
    this.setState({terms: !this.state.terms});
}

render(){
    const language = this.props.currentLanguage;

    return (
        <div>
            <Terms
                nameYes="chcTerms"
                text={language.termsText}
                state={this.state.terms}
                onChange={this.handleTerms.bind(this)}
                currentLanguage={language}
                error={this.state.errors.terms}/>

        </div>
    );
}
}

And component term is as follows :

import React from 'react';

const Terms = ({nameYes, text, state, onChange, error}) => {

let hasError = error ? "hasError" : "";

return (
    <div className="col-lg-12 text-center" style=>
        <form>
            <label className="radio-inline">
                <input
                    type="checkbox"
                    name={nameYes}
                    checked={state}
                    onChange={onChange}
                    value=""/>
            </label>
        </form>
        <p className={`questionsText ${hasError}`} style=>{text}</p>
    </div>
);
};

export default Terms;

But when I click on the checkbox, nothing happens. If I console log the state in the terms component it show right value. First time is false, when I click on the checkbox than is true, but the checkbox isn't checked.

Any advice?




Aucun commentaire:

Enregistrer un commentaire