【发布时间】：2020-06-26 23:01:23
【问题描述】：
单击取消按钮后，我想清除输入字段中的值。表单中的字段值都很清楚，这是我在 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: ""
});
}
【问题讨论】：
-
你能在这里做一个你的项目的例子吗：codesandbox.io？只是建议您可能想使用react-bootstrap.github.io，几乎相同，但比普通html更具反应性。
标签： reactjs bootstrap-4 bootstrap-modal