on select select異なるフォームreactjs

Question

私はreact jsを使ってアプリケーションを開発しています。 現在、selectの異なるフォームのonchangeイベントをロードする方法に固執しています。私はevent2.js

などでそれを保存していると言う異なるフォーム をロードするイベント2上だから、選択の

var Eventoption = React.createClass({ 
     getInitialState: function() { 
      return { 
       value: 'A' 
      } 
     }, 
     change:function(event){ 
      this.setState({value: event.target.value}); 

     }, 
     render : function(){ 
      return <div className="form-group"> 
          <select onChange={this.change} value={this.state.value} className="form-control"> 
          <option value="A">Event1</option> 
          <option value="V">Event2</option> 
          <option value="S">Event3</option> 
          </select> 
          <p></p> 
        <p>{this.state.value}</p> 
          </div> 
     } 
     }); 

var Event2Form = React.createClass({ 

     render:function() { 
      return 
        <h3><u>Add Event</u></h3> 
        <form action="index.php" method="post" id="event2Form"> 
         <div className="form-group"> 
         <label for="exampleEventId">Event Id</label> 
         <input type="text" name="event_id" className="form-control" id="event_id" placeholder="Enter Event Id" /> 
         </div> 
         <div className="form-group"> 
         <label for="exampleEventName">Event Name</label> 
         <input type="text" name="event_name" className="form-control" id="event_name" placeholder="Enter Event name" /> 
         </div> 

        </form> 
       </div>; 
     } 
    }); 

    window.Event2Form = Event2Form; 

、それを達成することができるか、私に教えてくださいまたは他のよりよいアプローチが現在のもの以外にある。

Answer 1

最も簡単な方法の1つです。

var Eventoption = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'A' 
     } 
    }, 
    change:function(event){ 
     this.setState({value: event.target.value}); 

     }, 
     render : function(){ 
      var formCmp; 
      if (this.state.value === 'A') 
       formCmp = <Event1Form /> 
      else if (this.state.value === 'V') 
       formCmp = <Event2Form /> 

      return (
       <div className="form-group"> 
          <select onChange={this.change} value={this.state.value} className="form-control"> 
          <option value="A">Event1</option> 
          <option value="V">Event2</option> 
          <option value="S">Event3</option> 
          </select> 
          <p></p> 
         <p>{this.state.value}</p> 
        {formCmp} 
       </div> 
      ); 
     } 
}); 

var Event2Form = React.createClass({ 

    render:function() { 
     return 
       <h3><u>Add Event</u></h3> 
       <form action="index.php" method="post" id="event2Form"> 
        <div className="form-group"> 
        <label for="exampleEventId">Event Id</label> 
        <input type="text" name="event_id" className="form-control" id="event_id" placeholder="Enter Event Id" /> 
        </div> 
        <div className="form-group"> 
        <label for="exampleEventName">Event Name</label> 
        <input type="text" name="event_name" className="form-control" id="event_name" placeholder="Enter Event name" /> 
        </div> 

       </form> 
      </div>; 
    } 
});