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

我正在学习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 is not a function

'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;