单击取消按钮后,我想清除输入字段中的值。表格中所有字段的值都清楚,这是我在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: ""
});
}
您肯定有正确的想法Thanik。从外观上看,您似乎没有正确绑定。尝试使用如下所示的箭头功能,并告诉我它是否适合您。