javascript - 从 REACT JS 中的单独类调用函数

Question

我正在学习 REACT，但遇到了一些麻烦。

我有多个页面/组件，每个页面都有一个表单，我编写了一个函数来处理提交后的表单输入。

但是我想将这个函数移动到它自己的组件中，这样每个页面在提交表单时都只调用这个单个组件。

我的问题是如何使用 REACT 完成此操作，我已经搜索了几个小时，就是想不通。

这里有两个示例组件:

表单处理器/表单处理

    'use strict';

import React from 'react/addons';


const FormProcessing = React.createClass({
  _test: function() {
    console.log('test');
   //do something with form values here
  },

  render(){

  }
});
export default FormProcessing;

带有表单的示例组件，需要从“FormProcessing”组件调用“test”函数

'use strict';

import React         from 'react/addons';
import {Link}        from 'react-router';
import DocumentTitle from 'react-document-title';

const BreakingNewsPage = React.createClass({

  propTypes: {
    currentUser: React.PropTypes.object.isRequired
  },

  _inputFields: function() {
    return (
      <form id="breakingNewsForm" action="" onclick={call test function from form processing component}>
        <fieldset>
          <legend>Headline</legend>
          <div className="form-group">
            <input type="text" className="form-control input-size-md" id="inputHeadline" placeholder="Headline (Example: Budget Cuts)"/>
          </div>
          <legend>Breaking News</legend>
          <div class="form-group">
            <input type="text" className="form-control input-size-lg" id="inputDescription1" placeholder="Breaking News Description"/>
            <input type="text" className="form-control input-size-lg" id="inputDescription2" placeholder="Breaking News Description"/>
          </div>
        </fieldset>
      </form>
    );
  },

  _formButtons: function() {
    return (
      <div className="form-buttons">
        <button form="breakingNewsForm" type="reset" className="btn-lg">Clear</button>
        <button form="breakingNewsForm" type="submit" classn="btn-lg">Save</button>
      </div>
    );
  },

  render() {
    return (
      <DocumentTitle title="Breaking News">
        <section className="ticker-page page container-fluid">

          <div className="page-title">
            <h1>Breaking News</h1>
          </div>

          <div className="com-md-6">
            {this._inputFields()}
            {this._formButtons()}
          </div>

        </section>
      </DocumentTitle>
    );
  }

});

export default BreakingNewsPage;

---

使用由 ycavatars 提供的示例更新代码

此类呈现表单和其他一些位，我现在需要“FormProcessing 类”并将其分配给 _formHandler: FormProcessing,

然后我尝试使用 this._formHandler.handleForm(); 从 formProcessing 类调用函数 handleForm 但我收到此错误:Uncaught TypeError: this._formHandler.handleForm 不是函数

'use strict';

import React         from 'react/addons';
import {Link}        from 'react-router';
import DocumentTitle from 'react-document-title';
var FormProcessing = require ('../components/FormProcessing.js');

const IntroPage = React.createClass({

  propTypes: {
    currentUser: React.PropTypes.object.isRequired
  },

  _formHandler: FormProcessing,

  // initial state of form
  getInitialState: function() {
    return {
      type: 'info',
      message: ''
    };
  },

  // handles the form callback
  _handleSubmit: function (event) {
    event.preventDefault();
    // Scroll to the top of the page to show the status message.
    this.setState({ type: 'info', message: 'Saving...' }, this._sendFormData);
  },

  // sends form data to server
  _sendFormData: function () {

    this._formHandler._handleForm();

    this.setState({ type: 'success', message: 'Form Successfully Saved' });
    return;
  },

  _inputFields: function() {
    var rows = [];
    for(var i = 1; i <= 12; i++) {
      var placeHolder = 'Intro text line ' + i;
      var inputID = 'inputIntroText ' + i;
      rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id={inputID} placeholder={placeHolder}/>);
    }

    return (
      <form id="introForm" action="" onSubmit={this._handleSubmit}>
        <fieldset>
          <legend>Intro Title</legend>
          <div className="form-group">
            <input type="text" className="form-control input-size-md" name="formInput" id="introTitle" placeholder="Intro Title"/>
          </div>
          <legend>Intro Text</legend>
          <div className="form-group">
            {rows}
          </div>
        </fieldset>
      </form>
    );
  },

  _formButtons: function() {
    return (
      <div className="form-buttons">
        <button form="introForm" type="reset" className="btn-lg">Clear</button>
        <button form="introForm" type="submit" className="btn-lg">Save</button>
      </div>
    );
  },

  render() {

    // checks and displays the forms state
    if (this.state.type && this.state.message) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
    }

    return (
      <DocumentTitle title="Intro">
        <section className="intro-page page container-fluid">

          <div className="page-title">
            <h1>Intro</h1>
          </div>

          <div className="com-md-6">
          {status}
            {this._inputFields()}
            {this._formButtons()}
          </div>

        </section>
      </DocumentTitle>
    );
  }

});

export default IntroPage;

这是 FormProcessing 类

    'use strict';

import React from 'react/addons';
var IntroPage = require ('../pages/IntroPage.js')

class FormProcessing extends React.Component {

  _handleForm() {
    console.log('you caled me!');
  }

};
export default FormProcessing;

Answer 1

您想从 BreakingNewsPage 组件调用 FormProcessing._test。您必须知道类和实例之间的区别。 React.createClass 返回一个描述组件的类，组件的 render 方法返回一个虚拟 DOM 元素。

为了调用FormProcessing._test，您必须获得对FormProcessing 类的backing instance 的引用。这就是 React 提供 ref 的原因。 official tutorial解释细节。

有一个开源项目，how to center in css , 使用许多 ref。你可以看看。