Уровень компонента onChange?

Question

У меня есть страница с параметрами. Этот компонент состоит из строки. Каждая строка является настройкой. Этот параметр - это выбор, проверка, радио или пользовательский элемент. Этот компонент обновляется двумя способами:

1. AJAX рассказывает обновить с SetState - это SetState классифицировать не как компонент OnChange, но только обновление компонентов
2. Пользователь манипулирует строку, вызывая выбор/радио/проверить OnChange для запуска, то OnChange запускает SetState на самый верхний компонент - это SetState классифицировать как компонент OnChange

Когда # 2 происходит, то есть манипулируют пользовательский компонент, я хочу OnChange на самый верхний компонент к выстрелу. Есть ли такое событие? Я не могу найти его в жизненном цикле компонентов.

Причина, по которой я не могу использовать componentDidUpdate, заключается в том, что когда пользователь запускает изменение строки, мне нужно сделать запрос на сервер с новой информацией. Если AJAX сообщает компоненту обновить, onComponentDidUpdate будет запускаться, но мне не нужно делать запрос AJAX.

Answer 1

Вы можете сделать это, передав обратный вызов из Top Component в свой дочерний компонент Property. Затем обратный вызов будет вызван событием Child component onChange, используя this.props.callbackName(). Например

TopComponent.js

// import react (i'm using es2015) 
// but the concept is the same whether you use it or not 

import React, {Component} from 'react' 

class TopComponent extends Component { 

    // the callback 
    onChildComponentChange(){ 
     doAjax().then(function(data){ 
     this.setState({foo: data}) 
     }) 

    } 

    render(){ 
     return (<ChildComponent onPropertyChange={this.onChildComponentChange}) /> 
    } 
} 

ChildComponent.js

import React, {Component} from 'react' 

class ChildComponent extends Component { 

    onChangeHandler(){ 
    // from this handler we call the top component callback 
    this.props.onPropertyChange(data) // the name of props we pass from top component 
    } 
    render(){ 
    return (<RowComponent onClick={this.onChangeHandler}/>) 
    } 
}