PROSAGA码农传奇-ECN-如何从父级调用子组件中的事件处理程序或方法？

<div class =“post-text”itemprop =“text”>
  <P>
    这取决于您对点击的期望。他们只会更改给定项目的状态还是会在该层次结构之外执行更改？每个标签中都会出现一个晶圆厂，或者您不确定？
  </p>
  <P>
    在大多数情况下，我认为你最好不要做你以前做过的事情。为每个Tab写一个CustomComponent并让它自己处理FAB。这可能是一个糟糕的方法的唯一情况是，如果你事先知道FAB的回调将改变并超出CustomComponent层次结构，因为在这种情况下，你可能会在长期内最终得到一个回调混乱（仍然，全球国家管理无法解决的问题。
  </p>
  <P>
    的<strong>
      编辑后编辑：
    </强>
     有一个按钮调用一个子组件内的函数在React中是不可能的（因为它的单向数据流，所以不采用Refs或完全避免React的其他机制）。该函数必须在某个共同点，在这种情况下，在安装按钮和ListOfThings组件的组件中。该按钮将调用该方法，该方法将更改“Parent”组件中的状态，并且新状态将通过props传递给ListOfThings组件：
  </p>
   <pre>
    <code>
      export default class Parent extends Component {
  state = {
    list: []
  };

clickHandler = () => {
    // Update state however you need
    this.setState({
      list: [...this.state.list, 'newItem']
    });
  }

render() {
    return (
      <div>
        <SwipeableViews>
          <TabContainer dir={theme.direction}>
            <ListOfThingsComponent list={this.state.list /* Passing the state as prop */}/>
          </TabContainer>
          <TabContainer dir={theme.direction}>Item Two</TabContainer>
          <TabContainer dir={theme.direction}>Item Three</TabContainer>
        </SwipeableViews>
        {
          fabs.map((fab, index) => (
            <Zoom>
              <Fab onClick={this.clickHandler /* Passing the click callback */}> 
                Add Item to List Component
              </Fab>
            </Zoom>
          ))
        }
      </div>
    )
  }
}

</code>
  </pre>
  <P>
    如果您真的需要您的层次结构保持这样，您必须使用此方法或ListOfThingsComponent可以读取的某种形式的全局状态管理。
  </p>
</DIV>