reactjs - 如何在Reactjs中触发父子事件

Question

我需要启动一个在父按钮的子组件中具有的功能，但我还没有得到它，有人知道某种形式，我已经看过一些示例，但我找不到可以帮助我的东西，因为它们只处理属性变化

这是我的代码父级:

import React from 'react';
import ReactDom from 'react-dom';
import AppBar from 'material-ui/AppBar';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Menux from '../componentes/menux';

class App extends React.Component {
     constructor(props) {
    super(props);
  }
  render() {
    return (
<div>
         <AppBar
    title="Aqui empezara todo"
    onLeftIconButtonTouchTap = {Menuxr.handleToggle}
  />
     <Menux />
</div>
        );
    }

}

injectTapEventPlugin();
ReactDom.render( <MuiThemeProvider><App/></MuiThemeProvider>,document.getElementById('workspace'));

child

import React from 'react';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';

export default class Menux extends React.Component {

  constructor(props) {
    super(props);
    this.state = {openmenu: false};
  }

  handleClose = () => this.setState({openmenu: false});
  handleToggle = () => this.setState({openmenu: !this.state.openmenu});
  render() {
    return (
      <div>
        <RaisedButton
          label="Toggle Drawer"
          ref="menu"
          onTouchTap={this.handleToggle}/>
        <Drawer width={200} openSecondary={false} open={this.state.openmenu} >
          <AppBar title="menu"
                   onLeftIconButtonTouchTap = {this.handleClose}
          />
            <MenuItem onTouchTap={this.handleClose}>Mi perfil</MenuItem>
            <MenuItem onTouchTap={this.handleClose}>Mis usuarios</MenuItem>
            <MenuItem onTouchTap={this.handleClose}>Mis unidades</MenuItem>
        </Drawer>
      </div>
    );
  }

Answer 1

不幸的是，React 的功能并不是这样的。您正在尝试使用Menux.handleToggle作为 onLeftIconButtonTouchTap 的回调 Prop ，对吧？因此，当有人单击左侧图标按钮时，您需要 Menux执行 handleToggle 的组件功能？

这行不通，原因有两个:

1. 当您调用Menux.handleToggle时，您不是在实例上调用它! Menux是对类本身的引用。它没有您期望的内部状态。此外，handleToggle是一个实例方法。这意味着它只能在 Menux 的实例上执行类。
2. 您可能引用的是Menux类，但如上所述，这与渲染 <Menux /> 时 React 创建的实例不同。元素。

确实很难充分阐明为什么它是错误的，它只是在几个层面上根本上是错误的，呵呵。长话短说:您不能调用这样的类的函数并期望它更改未指定的类的实例。

<小时/>

让我们过去吧。现在，有一种复杂的方法可以让你的代码按照你编写的方式工作，但我认为最好帮助你理解一种更惯用的方法。也就是说，一种更“React 方式”来完成您想要的事情。

我们想要“提升国家地位”。这个概念就是这篇文章: https://facebook.github.io/react/docs/lifting-state-up.html

我强烈建议阅读那篇文章。

为什么我们要“提升状态？”在 React 中，子节点之间不进行通信。只有 child 和 parent 才能互相交流。事实上， parent 通过提供数据和函数进行通信， child 仅通过调用 parent 提供的函数来进行通信。

想象一下您是一个 child ，是 5 个 sibling 之一。你们每个人都有一部手机，但你不知道 sibling 的电话号码。你只有 parent 的电话号码。但你需要向你的一些 sibling 传达一些信息。你做什么工作？您调用 parent 的电话号码，向他们转发信息， parent 会调用您的 sibling 并将数据转发给他们。

这就是 React 的工作原理。

那么我们如何将其应用到您的情况？ 让父级告诉菜单何时打开，而不是让菜单自行确定其打开时间。这样，家长就可以同时给出 Menux组件和 AppBar组件一个功能，他们可以用它来说“嘿妈妈，你能关闭菜单吗？”

我们会将状态从 Menux 组件提升到 App 组件。

class App extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
       openmenu: false
    }
  }
  handleClose = () => this.setState({openmenu: false});
  handleToggle = () => this.setState({openmenu: !this.state.openmenu});
  render() {
    return (
<div>
         <AppBar
    title="Aqui empezara todo"
    onLeftIconButtonTouchTap = {this.handleToggle}
  />
     <Menux openmenu={this.state.openmenu} handleToggle={this.handleToggle} handleClose={this.handleClose} />
</div>
        );
    }

}

啊哈!现在我们的应用程序确定菜单何时关闭以及何时不关闭。这是唯一的真理来源!但是，它提供了 AppBar和Menux如果他们想要更改父级中的状态，他们可以调用一些函数。那么Menux会怎样呢？改变？

export default class Menux extends React.Component {

  render() {
    return (
      <div>
        <RaisedButton
          label="Toggle Drawer"
          ref="menu"
          onTouchTap={this.props.handleToggle}/>
        <Drawer width={200} openSecondary={false} open={this.props.openmenu} >
          <AppBar title="menu"
                   onLeftIconButtonTouchTap = {this.props.handleClose}
          />
            <MenuItem onTouchTap={this.props.handleClose}>Mi perfil</MenuItem>
            <MenuItem onTouchTap={this.props.handleClose}>Mis usuarios</MenuItem>
            <MenuItem onTouchTap={this.props.handleClose}>Mis unidades</MenuItem>
        </Drawer>
      </div>
    );
  }

它使用父级传递给它的函数来设置父级中的状态。一个漂亮、简单、可重用的组件!

这就是 React 的做事方式。父子之间仅进行通信，状态和函数传递给子级，子级调用这些函数来更改树中更高层的状态。美丽!

<小时/>

“但是，但是，但是……我真的不想用 React 的方式做事!”

Fiiiiine。值得庆幸的是，其他人用一种非常简单的方法回答了(所以我不必:])来完成您想做的事情，而不必将您的应用程序重组为咳咳更惯用的方式。