你如何在另一个组件中调用组件？

我想要做一个表单，如果你按下按钮，你从另一个组件获得另一个表单。到目前为止，没有运气你如何在另一个组件中调用组件？

/** 
* @jsx React.DOM 
*/ 
'use strict'; 
var React = require('react'); 
//var CompetenceActions = require('../actions/CompetenceActions.js'); 
var Alert = require('react-bootstrap/Alert'); 
var ReactPropTypes = React.PropTypes; 
var KeybehaviourComponent = require('./KeybehaviourComponent.js'); 

var CompetenceComponent = React.createClass({ 
    /* jshint ignore:start */ 
    render:function(){ 
     return(
      <div> 
       <div> 
        <p> 
         Competence Name: <input type='text' id='competencename' onChange={this._onChangeName} autoFocus={true}/><br/> 
         Competence Description: <input type='textarea' id='competencedescription' onChange={this._onChangeDescription}/> 
        </p> 
       </div> 
       <div> 
        <button onClick={this.addKeybehaviour}>Add Keybehaviour</button> 
       </div> 
       <div> 
        <p> 
         <button onClick={this.submitForm}>submit</button> 
        </p> 
       </div> 
      </div> 
     ); 
    }, 
    /* jshint ignore:end */ 

    getInitialState:function(){ 
     return ({ 
      competenceName: '' , 
      competenceDescription: '' 
     }); 
    }, 

    _onChangeName: function(/*object*/ event) { 
     this.setState({ 
     competenceName: event.target.value 
     }); 
    }, 

    _onChangeDescription: function(/*object*/ event) { 
     this.setState({ 
      competenceDescription: event.target.value 
     }); 
    }, 
    /* jshint ignore:start */ 
    addKeybehaviour:function(){ 
     return (
      <div> 
       <KeybehaviourComponent/> 
      </div> 
     ); 
    }, 
    /* jshint ignore:end */ 

    submitForm:function(){ 
     console.log(this.state.competenceName); 
     console.log(this.state.competenceDescription); 
     //CompetenceActions.createCompetence(competenceName, comptenceDescription); 
     //this.setState({competenceNameValue: this.props.competenceName, competenceDescriptionValue: event.target.comptenceDescription}); 
    } 
}); 

module.exports = CompetenceComponent;

这正是我创建一个表单，我的第一个组件，使其并调用另一种形式，当我按下按钮”

/** 
* @jsx React.DOM 
*/ 
'use strict'; 
var React = require('react'); 
//var CompetenceActions = require('../actions/CompetenceActions.js'); 
var Alert = require('react-bootstrap/Alert'); 
var ReactPropTypes = React.PropTypes; 

var KeybehaviourComponent = React.createClass({ 
    /* jshint ignore:start */ 
    render:function(){ 
     return(
      <div> 
       <div> 
        Keybehaviour Name: <input type='text' defaultValue='name' id='keybehaviourname' onChange={this._onChangeName} autoFocus={true}/> 
       </div> 
       <div> 
        Keybehaviour Description: <input type='text' defaultValue='description' id='keybehaviourdescription' onChange={this._onChangeDescription}/> 
       </div> 
      </div> 
     ); 
    }, 
    /* jshint ignore:end */ 

    getInitialState:function(){ 
     return ({ 
      keybehaviourName: '' , 
      keybehaviourDescription: '' 
     }); 
    }, 

    _onChangeName: function(/*object*/ event) { 
     this.setState({ 
      keybehaviourName: event.target.value 
     }); 
    }, 

    _onChangeDescription: function(/*object*/ event) { 
     this.setState({ 
      keybehaviourDescription: event.target.value 
     }); 
    } 
}); 

module.exports = KeybehaviourComponent;

这就是所谓的组件

来源

2014-10-31 Wouter

你不能只在onClick中返回一个反应组件。我会尽力让你开始解决方案。你应该做的addKeybehaviour功能是这样的：在CompetenceComponent渲染功能

var newAmount = this.state.currentAmount + 1; 
this.setState({currentAmount: newAmount});

现在尝试做这样的事情：在你的回报

var keyboardComponents = []; 
for (i = 0; i <= this.state.currentAmount; i++) { 
    keyboardComponents.push(<KeybehaviourComponent />) 
}

现在只是把{keyboardComponents}某处功能。希望这会让你开始。

来源

2014-10-31 17:51:54 zackify

你如何在另一个组件中调用组件？

回答

相关问题