[英]update state child from parent's onClick on reactjs
I have a simple CRUD with React, I use bootstrap modal for adding the item, updating and dropping. 我在React中有一个简单的CRUD,我使用bootstrap模态来添加项目,更新和删除。 to do that, I create parent component called country.js for listing country.
为此,我创建了一个名为country.js的父组件来列出国家。 then I create modal.js for adding and updating item.
然后创建用于添加和更新项目的modal.js。
in this case, my onClick button in parent component, I want to fill input by props data from the parent by passing it to the child component. 在这种情况下,我的父组件中的onClick按钮,我想通过将来自父代的props数据传递给子组件来填充输入。 it is possible if I update child state by the onClick event in the parent?
是否可以通过父级中的onClick事件更新子级状态?
country.js 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 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 for your help :) 谢谢你的帮助:)
When you update a state in parent component it will not reflect in child components until you use componentWillReceiveProps(props)
. 在父组件中更新状态时,除非使用
componentWillReceiveProps(props)
否则它不会在子组件中反映出来。
Bascially componentWillReceiveProps(props)
keeps track whenever the state is changed. 基本上,
componentWillReceiveProps(props)
会在状态更改时保持跟踪。
So when you do 所以当你这样做
<DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />
This will only bind state which were set at initial render()
. 这只会绑定在初始
render()
处设置的状态。
Solution 解
In you Modal class create a method of React Lifecycle as 在您的Modal类中,创建React Lifecycle的方法为
componentWillReceiveProps(props){
console.log(props.rowId) //this will get whenever state changes after initial render
}
See more on componentWillReceiveProps() 查看更多关于componentWillReceiveProps()
You just pass those states as props to the child component: 您只需将这些状态作为道具传递给子组件:
<SomeChildComponent someProperty={this.state.someState} />
Then the child component will receive the updated props ( this.props.someProperty
) automatically when the state in parent changes. 然后,当父组件的状态更改时,子组件将自动接收更新的道具(
this.props.someProperty
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.