我有一个简单的CRUD与React，我使用bootstrap模式添加项目，更新和删除。为此，我创建了名为country.js的父组件，用于列出国家/地区。然后我创建了modal.js来添加和更新项目。
在这种情况下，我在父组件中的onClick按钮，我希望通过将父项中的道具数据传递给子组件来填充输入。我可以通过父级中的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求助：）
答案 0 :(得分：1)
更新父组件中的状态时，在使用componentWillReceiveProps(props)之前，它不会反映在子组件中。
基本上componentWillReceiveProps(props)会在状态发生变化时跟踪。
所以当你这样做时
<DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />
这只会绑定在初始render()设置的状态。
<强>解决方案
在你的Modal类中，创建一个React Lifecycle的方法
componentWillReceiveProps(props){
console.log(props.rowId) //this will get whenever state changes after initial render
}
答案 1 :(得分：0)
您只需将这些状态作为道具传递给子组件：
<SomeChildComponent someProperty={this.state.someState} />
当父级中的状态发生变化时，子组件将自动接收更新的道具（this.props.someProperty）。