Изменение состояния/реквизит в родительском

Question

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

У вас есть страница, на которой у вас есть данные, данные передаются в компонент, который будет отображаться. Затем у вас есть компонент, основанный на сортировке и фильтрации. Вы должны иметь возможность использовать изменения фильтра сортировки, применимые к компоненту страницы, чтобы можно было манипулировать данными.

Thanks

e.g.

> Page Component (this is where i get my data) 
    >> Filtering & Sort Component (this is where I want to change the data) 
    >> Data Listing Component (data passed into this) 

Answer 1

Pass вниз обратные вызовы, которые будут вызываться, когда пользователь взаимодействует с вашей фильтрации и сортировки компонентов

import React, { PropTypes } from 'react' 

class Page extends React.Component { 
    updateFiltering(params) { 
    this.setState({data: /* */}) 
    } 

    updateSort(params) { 
    this.setState({ data: /* */}) 
    } 

    render() { 
    return (
     <div> 
     <Filtering 
     onFilter={this.updateFiltering} onSort={this.updateSort}> 
     </Filtering> 
     <DataListing data={this.state.data}></DataListing> 
     </div>); 
    } 
} 

в onFilter и onSort реквизита будут затем использованы в ваших компонентов для onChange реквизита на входных элементов.

class Filtering extends React.Component { 

    onChange(event) { 
    // do something with your filter or just give it directly to the callback 
    this.props.onFilter(event.target.selected) 
    } 

    render() { 
    return (
     <select onChange={this.onChange}></select> 
    ); 
    } 
} 

Answer 2

Вы также можете передавать методы в качестве реквизита. Затем дочерний элемент a передает изменение родительскому и родительскому обновлениям дочернего элемента b.