从父级的onClick更新状态子级

Question

我在React中有一个简单的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">&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>
    )
}

谢谢你的帮助:)

Answer 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
}

查看更多关于componentWillReceiveProps（）

Answer 2

您只需将这些状态作为道具传递给子组件：

<SomeChildComponent someProperty={this.state.someState} />

然后，当父组件的状态更改时，子组件将自动接收更新的道具（ this.props.someProperty ）。