Javascript 从父项更新状态子项';s onClick on reactjs
我有一个简单的CRUD和React,我使用引导模式添加项目,更新和删除。为此,我创建了名为country.js的父组件来列出country。然后我创建modal.js来添加和更新项目 在本例中,我的onClick按钮位于父组件中,我希望通过将数据传递给子组件来填充来自父组件的props数据输入。如果我通过父级中的onClick事件更新子级状态,这是可能的 country.jsJavascript 从父项更新状态子项';s onClick on reactjs,javascript,reactjs,Javascript,Reactjs,我有一个简单的CRUD和React,我使用引导模式添加项目,更新和删除。为此,我创建了名为country.js的父组件来列出country。然后我创建modal.js来添加和更新项目 在本例中,我的onClick按钮位于父组件中,我希望通过将数据传递给子组件来填充来自父组件的props数据输入。如果我通过父级中的onClick事件更新子级状态,这是可能的 country.js getRow(res){ //console.log(res) this.setState({
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>
)
}
getRow(res){//console.log(res)
这是我的国家({
rowId:res.country\u id,
国家id:res.country\u id,
国家:res.country
})
}
render(){
返回(
主数据
国家
添加
#
国名
最后更新
行动
{this.state.data.map(res=>
{res.country_id}
{res.country}
{res.last_update}
this.getRow(res)}
className=“btn btn信息”
数据切换=“模态”数据目标=“#getModal”>更新
this.getRow(res)}
className=“btn btn危险”
数据切换=“模态”数据目标=“#getModalDelete”>
删除
)}
)
}
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>
)
}
render(){
返回(
&时代;
添加数据{this.props.dataBind.rowId}
国家Id
国名
接近
保存更改
)
}
谢谢您的帮助:)您只需将这些状态作为道具传递给子组件:
<SomeChildComponent someProperty={this.state.someState} />
然后,当父组件中的状态更改时,子组件将自动接收更新的props(
this.props.someProperty
)。当您更新父组件中的状态时,它将不会反映在子组件中,直到您使用componentWillReceiveProps(props)
基本上,组件将接收道具(道具)
在状态更改时保持跟踪
所以当你这么做的时候
<DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />
请参阅有关是的。。。我错过了那些东西,这可以保护我的头发:D,谢谢@Manoj
componentWillReceiveProps(props){
console.log(props.rowId) //this will get whenever state changes after initial render
}