我有一个简单的crud,我使用bootstrap模态添加项目,更新和掉落。为此,我创建了称为country.js列表国家/地区的父组件。然后,我创建用于添加和更新项目的Modal.js。
在这种情况下,我在父组件中的ONCLICK按钮,我想通过将其传递给子女组件来填写来自父母的Props数据的输入。如果我通过父母的onclick事件更新儿童状态?
country.js
getRow(res){ //console.log(res)
this.setState({
rowId: res.country_id,
country_id: res.country_id,
country: res.country
})
}
render(){
return (
<div>
<div>
<div id="page-wrapper">
<div className="row">
<div className="col-lg-12">
<h1 className="page-header">Master Data</h1>
</div>
</div>
<div className="col-lg-12">
<div className="panel panel-default">
<div className="panel-heading">
Country
<button type="button"
data-toggle="modal" data-target="#getModal"
className="btn btn-primary pull-right">Add
</button>
</div>
<div className="panel-body">
<div className="table-responsive">
<table className="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Country Name</th>
<th>Last Update</th>
<th style={{width: '170px'}}>Action</th>
</tr>
</thead>
<tbody>
{this.state.data.map(res =>
<tr key={res.country_id}>
<td>{res.country_id}</td>
<td>{res.country}</td>
<td>{res.last_update}</td>
<td>
<button type="button"
onClick={(e) => this.getRow(res)}
className="btn btn-info"
data-toggle="modal" data-target="#getModal">Update
</button>
<button type="button"
onClick={(e) => this.getRow(res)}
className="btn btn-danger"
data-toggle="modal" data-target="#getModalDelete">
Delete
</button>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<Modal dataBind={this.state} addHandler={this.addHandler} handleClearForm={this.handleClearForm} />
<DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />
</div>
)
}
modal.js
render(){
return (
<div className="modal fade" id="getModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" id="closeModal" onClick={this.handleClearForm} className="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 className="modal-title" id="myModalLabel">Add Data {this.props.dataBind.rowId}</h4>
</div>
<form onSubmit={this.handleSubmit} >
<div className="modal-body">
<div className="form-group">
<label>Country Id</label>
<input type="text" className="form-control"
onChange={this.logChange}
value={this.state.country_id}
placeholder={this.props.dataBind.country_id}
name="country_id" />
</div>
<div className="form-group">
<label>Country Name</label>
<input type="text" className="form-control"
onChange={this.logChange}
value={this.state.country}
placeholder={this.props.dataBind.country}
name="country" />
</div>
</div>
<div className="modal-footer">
<button
type="button" className="btn btn-default"
onClick={this.handleClearForm} data-dismiss="modal">
Close
</button>
<button
type="submit" className="btn btn-primary">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
)
}
thx提供帮助:(
当您在父组件中更新状态时,在使用 componentWillReceiveProps(props)
之前,它不会在子组件中反射。
每当改变状态时,componentWillReceiveProps(props)
都会保持跟踪。
所以当你做
时 <DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />
这只会绑定在初始render()
的状态。
解决方案
在您的模态类中,创建一种反应生命周期的方法
componentWillReceiveProps(props){
console.log(props.rowId) //this will get whenever state changes after initial render
}
请参阅ComponentWillReceiveProps((
您只需将这些状态作为道具传递给子女组件:
<SomeChildComponent someProperty={this.state.someState} />
然后,当父母中的状态更改时,子组件将自动接收更新的道具(this.props.someProperty
(。