Как вы называете компонент в другом компоненте в реакции?

Question

Я пытаюсь создать форму, где, если вы нажмете кнопку, вы получите другую форму от другого компонента. До сих пор не повезло

/** 
* @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; 

это компонент называется

Answer 1

Вы не можете просто вернуть компонент реакции в onClick. Я попытаюсь заставить вас начать решение. Вы должны сделать что-то подобное в функции addKeybehaviour:

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

Теперь в вашей визуализации функции CompetenceComponent попытаться сделать что-то вроде:

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

Теперь просто положить {keyboardComponents} где-то в возвращении функция. Надеюсь, вам это поможет.