Question

刚刚从其他人那里拿到了一个React项目，但是我对React很新，所以有点挣扎！

我有一个文件ReactReport.js，看起来像这样（简化）：

var ReportRoute = React.createClass({
  onToggleEditor: function() {
    this.setState({
      reportIsOpen: false
    });
  },
  getReportClassNames: function() {
    return classNames({
      'blinds--report-closed' : !this.state.reportIsOpen 
    });
  },
  render: function() {
    return (
      <div className={this.getReportClassNames()}>
        <!-- content -->
      </div>
    );
  }
});

module.exports = ReportRoute;

我有一个单独的文件index.js，其中包含点击事件。在我的onChange函数中，我想从onToggleEditor类触发ReportRoute函数。

var Categories = React.createClass({
  onChange: function(category) {
    // trigger ReportRoute.onToggleEditor();
  },
  renderCategory: function(category) {
    return (
      <Category
        category={category}
        chosenType={this.props.chosenType}
        key={category.type}
        onChange={this.onChange} />
    );
  },
  render: function() {
    return (
      <div>
        {this.state.categories.map(this.renderCategory)}
      </div>
    );
  }
});

module.exports = Categories;

如何从onToggleEditor的{{1}}函数中ReportRoute触发onChange函数？

Answer 1

您必须使用React的flux体系结构来进行组件间通信。通量有许多意义。 1.reflux 2. redux

基本上在onChange类别中，您将触发一个动作。

<div class="box-login" id="tab-login">  
    <form  method="POST" action="" >
        <p> enter username: <input type="text" name="slogin"/></p>
        <p> enter password: <input type="text" name="spass"/></p>
        <p> create new account -> <input type="submit" name="submit" /></p>
     </form>
</div>

<div class="box-deleteUser" id="tab-deleteUser">
    <form  method="POST" action="" >
        <p> <input type="text" name="sdelete" /> <input type="submit" name="submitDelete" value="usuń"/> </p>
     </form>
</div>

您的ReportRoute将绑定到商店。请检查此示例 https://blog.ochronus.com/react-js-reflux-example-2d46a4d8faf0#.wcarr7oqt

Answer 2

您需要使用Refs。简短的回答是在Categories类上有一个myRefs属性，然后将以下内容添加到Category标签中。

ref={ref => this.myRefs.push(ref)}

然后，您可以使用。

调用第一个处理程序

this.myRefs[0].onToggleEditor()

关于此链接的更多细节。

https://facebook.github.io/react/docs/more-about-refs.html

React：从另一个组件访问组件功能

2 个答案: