修改父

Question

我正试图了解如何通过子组件影响父组件。我知道反应的目的不是为了真正做到这一点，但你将如何在下面的场景中实现它？

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

由于

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

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

Answer 2

传递将在用户与过滤和排序组件交互时调用的回调

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