React - Deselecting the checkbox doesn't make div to dissapear

Thomas

New Member
#1
I'm currently messing around with Reactjs and don't know where exactly my problem lays. I wan't to render an input field if a certain chekbox is selected (requiredRoleResponsible in this case). If i check it first time to true it works fine, but if I deselect it, it won't disappear. Maybe i missing something?
Mã:
class ProccessForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = { name: '', description: '', requireSupervisor: false, requireRoleResponsible: false, roleResponsible: '' }
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
        this.handleSupervisorCheckbox = this.handleSupervisorCheckbox.bind(this);
        this.handleRoleResponsibleCheckbox = this.handleRoleResponsibleCheckbox.bind(this);
        this.handleRoleResponsibleChange = this.handleRoleResponsibleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleSubmit(e, data) {
        e.preventDefault();
        const name = this.state.name.trim();
        const description = this.state.description.trim();
        if (!name || !description)
            return;

        this.props.onProcessSubmit({ name: name, description: description });

        this.setState({ name: '', description: '' });
    }

    handleSupervisorCheckbox(e) {
        this.setState({requireSupervisor: Boolean(e.target.value)});
    }

    handleRoleResponsibleCheckbox(e) {
        this.setState({requireRoleResponsible: Boolean(e.target.value)});
    }

    handleRoleResponsibleChange(e) {
        this.setState({roleResponsible: e.target.value});
    }


    handleNameChange(e) {
        this.setState({ name: e.target.value })
    }

    handleDescriptionChange(e) {
        this.setState({ description: e.target.value })
    }

    render() {
        return (
            <div className="panel-body">
                <form className="processForm" onSubmit={this.handleSubmit}>

                    <div className="form-group">
                        <label htmlFor="inputName">Name</label>
                        <input className="form-control" id="inputName" type="text" placeholder="Prozessname" value={this.state.name} onChange={this.handleNameChange} />
                    </div>
                    <div className="form-group">
                        <label htmlFor="inputDescription">Beschreibung</label>
                        <textarea className="form-control" id="inputDescription" type="text" placeholder="Prozessbeschreibung" value={this.state.description} onChange={this.handleDescriptionChange} />
                    </div>
                    <span>Welche Genehmigungen werden benötigt?</span>
                    <div className="checkbox">
                        <label><input type="checkbox" value={this.state.requireSupervisor} onChange={this.handleRoleResponsibleCheckbox}/>Vorgesetzer</label>
                    </div>
                    <div className="checkbox">
                        <label><input type="checkbox" value={this.state.requireRoleResponsible} onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>
                    </div>
                    {this.state.requireRoleResponsible ?
                        <div className="form-group">
                            <label htmlFor="inputRoleResp">Name</label>
                            <input className="form-control" id="inputRoleResp" type="text" placeholder="Rollenverantwortlicher" value={this.state.roleResponsible} onChange={this.handleRoleResponsibleChange} />
                        </div> : null}
                    <div>
                        <input type="submit" value="erstellen" />
                    </div>
                </form>
            </div>
        );
    }
}
I tried different approaches I seen online so far. Making the second part of the if to null like currently in my code. Just to use this.state.requireRoleResponsible && the to render part and in the handler to make explicitely a boolean out of the value.

Thanks for your help
 

Admin

Administrator
Thành viên BQT
#2
For checkbox you need to use checked instead of value.

Checked will determined if the checkbox is checked or not. Value is just a property to hold.

In this case you need to change:

Mã:
 <input type="checkbox" value={this.state.requireRoleResponsible}
     onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>
To:
Mã:
<input type="checkbox" checked={this.state.requireRoleResponsible}
     onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>
And change the handler to:
Mã:
handleRoleResponsibleCheckbox(e) {
    this.setState({requireRoleResponsible: e.target.checked});
}
 
Top