Reactjs 清除值

我想在单击“取消”按钮后清除输入字段中的值。表单中字段中的值全部清除，这是我在ReactJS上构建的代码使用Bootstrap 4表单

        <div className="modal fade " id="addCateModal" tabIndex="-1" role="dialog" aria-labelledby="addCateModal" aria-hidden="true">
            <div className="modal-dialog modal-lg" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <h5 className="modal-title" id="addCateModal">Create Connection Database</h5>
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close" 
                        onClick={()=>this.onCloseModal()}>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div className="modal-body">
                        <form>
                            <div className="col-10" id="centerdiv">
                                <div className="form-group row">
                                    <label className="col-sm-3 col-form-label">Connection Name*:</label>
                                    <div className="col-sm-9">
                                        <input type="text" placeholder="Connection NameXXX"
                                            name="connectionName" className={'form-control' + (this.state.errors.connectionName ? ' is-invalid' : '')}
                                            onChange={(event) => this.setState({ connectionName: event.target.value })} />
                                    </div>
                                </div>
                                <div className="form-group row">
                                    <label className="col-sm-3 col-form-label">Database Type *:</label>
                                    <div className="col-sm-9">
                                        <Select options={listDriver} onChange={async (event) => {
                                            await
                                                event != null ?
                                                this.setState({ databaseType: event.value }) :
                                                this.setState({ databaseType: '' })
                                        }} isClearable={true} name="databaseType" />
                                    </div>
                                </div>
                            </div>
                            <div className="col-12">
                                <div className="input-group" style={{ 'marginBottom': '10px' }}>
                                    <span>Connect URL :</span>
                                </div>
                                <div className="card col-12">
                                    <div className="card-body">
                                        <div className="form-row">
                                            <div className="form-group col-md-6">
                                                <label>Host Name *</label>
                                                <input type="text" placeholder="Localhost" className="form-control" name="hostName"
                                                    onChange={(event) => this.setState({ hostName: event.target.value })} />
                                            </div>
                                            <div className="form-group col-md-6">
                                                <label>Port *</label>
                                                <input type="text" placeholder="1433" className="form-control" name="port"
                                                    onChange={(event) => this.setState({ port: event.target.value })} />
                                            </div>
                                        </div>
                                        <div className="form-group">
                                            <label>Database Name *</label>
                                            <input type="text" placeholder="Dbname NameXXX" className="form-control" name="databaseOfName"
                                                onChange={(event) => this.setState({ databaseOfName: event.target.value })} />
                                        </div>
                                    </div>
                                </div>
                                <div className="form-row" style={{ 'marginTop': '12px' }}>
                                    <div className="form-group col-md-6">
                                        <label>User Database Connect *</label>
                                        <input type="text" placeholder="Db_user_connectXXX" className="form-control" name="userDatabase"
                                            onChange={(event) => this.setState({ userDatabase: event.target.value })} />
                                    </div>
                                    <div className="form-group col-md-6">
                                        <label>Password *</label>
                                        <input type="password" placeholder="password" className="form-control" name="password"
                                            onChange={(event) => this.setState({ password: event.target.value })} />
                                    </div>
                                </div>
                            </div>
                            <div className="text-right col-12">
                                <button type="button" className="btn btn-secondary" onClick={this.handleCheckConnection.bind(this)}>Test Connection</button>
                            </div>
                            <div className="text-center">
                                <button type="button" className="btn btn-primary" onClick={this.handleSubmit.bind(this)}>Save</button>
                                <button type="reset" className="btn btn-danger ml-1" data-dismiss="modal" onClick={()=>this.onCloseModal()}>Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div> 

---

你的想法绝对正确。从外观上看，你似乎没有正确地装订。尝试使用下面的箭头函数，告诉我它是否适合您

onCloseModal = () => {

        this.setState({
            connectionName: "",
            databaseType: "",
            hostName: "",
            port: "",
            databaseOfName: "",
            userDatabase: "",
            password: "",
            connectionNameEdit: "",
            databaseTypeEdit: "",
            hostNameEdit: "",
            portEdit: "",
            databaseOfNameEdit: "",
            userDatabaseEdit: "",
            passwordEdit: "",
            idConnection: ""
        });
    }

---

你能在这里举例说明你的项目吗？只是建议你可能想使用，几乎一样的东西，但更反应比普通的html。

onCloseModal = () => {

        this.setState({
            connectionName: "",
            databaseType: "",
            hostName: "",
            port: "",
            databaseOfName: "",
            userDatabase: "",
            password: "",
            connectionNameEdit: "",
            databaseTypeEdit: "",
            hostNameEdit: "",
            portEdit: "",
            databaseOfNameEdit: "",
            userDatabaseEdit: "",
            passwordEdit: "",
            idConnection: ""
        });
    }