Question

我有一个选项页面组件。该组件由行组成。每行都是一个设置。该设置是select，check，radio或custom元素。该组件以两种方式更新：

AJAX告诉它用setState更新 - 这个setState我不是作为组件onChange分类而是JUST组件更新
用户操作一行，触发select / radio / check onChange触发，onChange触发最顶层组件的setState - 这个setState我被归类为组件onChange

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

我无法使用componentDidUpdate的原因是因为当用户触发onChange行时，我需要向服务器发出新信息请求。如果AJAX告诉compoent更新，onComponentDidUpdate将触发，但我不需要发出AJAX请求。

Answer 1

您可以通过在其子组件属性上传递Top 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}/>)
  }
}

组件级别onChange事件？

1 个答案: