Reactjs 在父级中修改状态/道具

我试图弄清楚如何通过子组件影响父组件。我知道react的设计目的不是真正做到这一点，但在下面的场景中，您将如何实现这一点

您有一个页面，其中包含数据，该数据被传递到要显示的组件中。然后就有了一个基于排序和筛选的组件。您需要能够使用对适用于页面组件的排序过滤器的更改，以便可以操纵数据

谢谢

e、 g

---

您还可以将方法作为道具传递。然后子a将更改传递给父级，父级更新子b。

传递回调，当用户与筛选和排序组件交互时将调用回调

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>);
  }
}

---

使用回调。在子组件中添加一个名为

onChange

的道具或其他东西，并在父组件中传递一个函数。i、 e.

this.setState（{value}）}/>

在

的渲染方法中。

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>);
  }
}

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>
    );
  }
}