javascript - 在选择渲染不同形式的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>;
    }
});