обновить состояние дочернего элемента от родительского элемента onClick на реагировать

Question

У меня есть простой CRUD с React, я использую мод загрузки для добавления элемента, обновления и удаления.Для этого я создаю родительский компонент с именем 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">&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>
    )
}

thx за вашу помощь:)

Answer 1

Когда вы обновляете состояние в родительском компоненте, оно не будет отражаться в дочерних компонентах, пока вы не используете componentWillReceiveProps(props).

Bascially componentWillReceiveProps(props) отслеживает каждый раз, когда изменяется состояние.

Так что, когда вы делаете

 <DeleteModal rowId={this.state.rowId} deleteHandler={this.deleteHandler} />

Это будет только состояние привязки, которое было установлено на начальном render().

Решение

В вашем модальном классе создайте метод 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) при изменении состояния в родительском компоненте.