Я хочу очистить значение в поле ввода после нажатия кнопки отмены. Значение в полях формы все ясно, и это мой код, основанный на 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">×</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() {
console.log('hello')
this.form.clear();
this.setState({
connectionName: "",
databaseType: "",
hostName: "",
port: "",
databaseOfName: "",
userDatabase: "",
password: "",
connectionNameEdit: "",
databaseTypeEdit: "",
hostNameEdit: "",
portEdit: "",
databaseOfNameEdit: "",
userDatabaseEdit: "",
passwordEdit: "",
idConnection: ""
});
}