Question

我目前正在搞混Reactjs，不知道我的问题到底出在哪里。如果选择了某个复选框，我将不呈现输入字段（在这种情况下为requireRoleResponsible）。如果我第一次将其检查为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>
        );
    }
}

我尝试了到目前为止在网上看到的其他方法。使if的第二部分像当前在我的代码中一样为null。只是使用this.state.requireRoleResponsible &&来呈现部分，并在处理程序中使用值显式地使布尔值成为

感谢您的帮助

Answer 1

对于复选框，您需要使用checked而不是value。

已选中将确定该复选框是否已选中。价值只是一种财产。

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

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

收件人：

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

并将处理程序更改为：

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

Answer 2

选中此复选框时，应使用“ checked”而不是“ value”（应使用value attr作为类型：text，select，...）

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

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

具有prevState的状态是您更新之前的当前状态

反应-取消选中复选框不会使div消失

2 个答案: