组件级别的 onChange 事件？

Question

我有一个选项页面组件。该组件由行组成。每一行都是一个设置。该设置可以是选择、检查、单选或自定义元素。该组件有两种更新方式：

1. AJAX 告诉它使用 setState 进行更新 - 我将这个 setState 归类为不是组件 onChange 而只是组件更新
2. 用户操作一行，触发select/radio/check onChange触发，onChange触发最顶层组件上的一个setState——这个setState我归类为组件onChange

当 #2 发生时，意味着用户操作的组件，我希望最顶层组件上的 onChange 触发。有这样的活动吗？我似乎在组件生命周期中找不到它。

我不能使用componentDidUpdate 的原因是当用户触发onChange of row 时，我需要使用新信息向服务器发出请求。如果 AJAX 告诉组件更新，onComponentDidUpdate 将触发，但我不需要发出 AJAX 请求。

Answer 1

您可以通过在其子组件属性上从顶级组件传递一个回调来做到这一点。然后，子组件 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}/>)
  }
}