Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/391.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 从父项更新状态子项';s onClick on reactjs_Javascript_Reactjs - Fatal编程技术网

Javascript 从父项更新状态子项';s onClick on reactjs

Javascript 从父项更新状态子项';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({

我有一个简单的CRUD和React,我使用引导模式添加项目,更新和删除。为此,我创建了名为country.js的父组件来列出country。然后我创建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>    
        )
    }
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">&times;</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
}