Html 反应-取消选中复选框不会'；Don’我不能跳伞消失

我现在正和Reactjs混在一起，不知道我的问题到底出在哪里。如果选择了某个复选框，我不想呈现输入字段（在这种情况下，requiredRoleResponsible）。如果我第一次检查它为true，它工作正常，但如果我取消选择它，它不会消失。也许我错过了什么

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>
        );
    }
}

class ProcessForm扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={name:''，description:''，RequirePerVisor:false，requireRoleResponsible:false，roleResponsible:'}
this.handleNameChange=this.handleNameChange.bind（this）；
this.handleDescriptionChange=this.handleDescriptionChange.bind（this）；
this.handlesuperversorcheckbox=this.handlesuperversorcheckbox.bind（this）；
this.handleRoleResponsibleCheckbox=this.handleRoleResponsibleCheckbox.bind（this）；
this.handleRoleResponsibleChange=this.handleRoleResponsibleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（e，数据）{
e、 预防默认值（）；
const name=this.state.name.trim（）；
const description=this.state.description.trim（）；
如果（！name | |！description）
返回；
this.props.onProcessSubmit（{name:name，description:description}）；
this.setState（{name:''，description:''}）；
}
无手柄监督器检查盒（e）{
this.setState（{requireSupervisor:Boolean（e.target.value）}）；
}
handleRoleResponsibleCheckbox（e）{
this.setState（{requireRoleResponsible:Boolean（e.target.value）}）；
}
负责人变更（e）{
this.setState（{rolereresponsible:e.target.value}）；
}
手形变化（e）{
this.setState（{name:e.target.value}）
}
handleDescriptionChange（e）{
this.setState（{description:e.target.value}）
}
render（）{
返回(
名称
贝施雷邦
Welche Genehmigungen werden benötigt？
涡流发生器
滚刀
{this.state.requireRoleResponsible？
名称
：null}
);
}
}

到目前为止，我尝试了在网上看到的不同方法。将if的第二部分设置为null，就像我的代码中当前一样。只需使用this.state.requireRoleResponsible&&来呈现部分，并在处理程序中明确地将值转换为布尔值

---

感谢您的帮助

对于复选框，您需要使用

checked

而不是

value

选中将确定复选框是否选中。值只是一个要保存的属性

在这种情况下，您需要更改：

 <input type="checkbox" value={this.state.requireRoleResponsible} 
     onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>

---

对于复选框，您需要使用

checked

而不是

value

选中将确定复选框是否选中。值只是一个要保存的属性

在这种情况下，您需要更改：

 <input type="checkbox" value={this.state.requireRoleResponsible} 
     onChange={this.handleRoleResponsibleCheckbox}/>Rollenverantwortlicher</label>

---

通过复选框，您应该使用checked而不是value（应该使用value attr作为类型：text，select，…）

在复选框的2个函数处理程序中，我认为您可以这样使用：

handleRoleResponsibleCheckbox(e) {
    //this.setState({requireRoleResponsible: Boolean(e.target.value)});
    this.setState((prevState)=>{
        return {
            requireRoleResponsible: !prevState.requireRoleResponsible
        }
    })
}

---

with prevState是更新前的当前状态。

with checkbox您应该使用checked而不是value（应该使用value attr作为类型：文本，选择，…）

在复选框的2个函数处理程序中，我认为您可以这样使用：

handleRoleResponsibleCheckbox(e) {
    //this.setState({requireRoleResponsible: Boolean(e.target.value)});
    this.setState((prevState)=>{
        return {
            requireRoleResponsible: !prevState.requireRoleResponsible
        }
    })
}

with prevState是更新前的当前状态