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,

然后我尝试使用handleForm从formProcessing类调用函数this._formHandler.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;

Answer 1

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

要致电FormProcessing._test，您必须获得backing instance类FormProcessing的引用。这就是为什么反应提供ref的原因。 official tutorial解释了详细信息。

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

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

1 个答案: