在選擇呈現不同形式的reactjs

Question

我正在使用react js開發一個應用程序。 目前停留在如何加載select的onchange事件的不同形式。

    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>
        }
       });

所以在選擇event2時，我想加載不同的表單，也就是說我已經將其保存在event2.js中

例如

    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

最簡單的方法之一。

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>;
    }
});