如何使用 ReactJS 在提交事件后添加组件？

Question

我正在尝试在另一个组件的提交事件之后添加一个组件。

var Extention  = React.createClass({
render: function(){ 
   alert("Enters the function");
    return(
        <div id="fitnesse-panel"> 
            this is where my second form code is located
        </div> 
        );
}
 });

var FormButton = React.createClass({ 
handleSubmit: function(e) {
    e.preventDefault();
    return (<Extention/>);
},
render: function() {
    return (
                <form role="form" onSubmit={this.handleSubmit}>
                    <input type="submit" value ="" />
                </form> 
            );
}
});

我想做的是单击 <Formbutton/> 中的提交按钮将 <Extention/> 加载到页面上。 Extension 组件呈现函数但 JSX 未返回给浏览器。任何帮助将不胜感激。

Answer 1

像这样的东西应该可以工作：

var FormButton = React.createClass({ 
    getInitialState: function() {
        return {'submitted': false};
    },

    handleSubmit: function(e) {
        e.preventDefault();
        this.setState({'submitted': true });
    },
    render: function() {
        if (this.state.submitted) {
            return <Extention/>;
        }
        else {
            return (
                <form role="form" onSubmit={this.handleSubmit}>
                    <input type="submit" value ="" />
                </form> 
            );
        }
    }
});

如何使用 ReactJS 在提交事件后添加组件？

How do I add a component after an submit event using ReactJS?

reactjs

react-jsx