每次用户单击“提交”按钮时，都渲染相同的React类

Question

对于JSX / React很新，Ive创建了一个函数，该函数从另一个类中获取道具并输出一个盒子，但这只能工作一次，并且不会在第一个初始盒子之后继续添加新的任务盒子。

代码：

var i = 0;
function createNewTask() {
    var title = document.getElementById('textbox1').value;
    var desc = document.getElementById('textarea1').value;
    var priority = document.getElementById('select1').value;
    class CreateNewTask extends React.Component {
        render() {
            return(<div class="task-card" id={priority}>
                <h1>{title}</h1>
                <p>{desc}</p>
            </div>);
        }
    }
    ReactDOM.render(<CreateNewTask />, document.getElementById('task-cards'));
}

function newTask() {
    i+=1;
    if(i == 1) {         
        class NewTask extends React.Component {

            render() {
                return (
                <div class="new-task-card">
                    <form class="container">
                        <div 
                        class="form-group form-custom">
                            <label 
                            for="textbox1">
                            Task Header
                            </label>
                            <input 
                            type="text" 
                            class="form-control" 
                            id="textbox1" 
                            placeholder="Enter Task Header">
                            </input>
                        </div>
                        <div 
                        class="form-group form-custom">
                            <label 
                            for="textarea1">Task Description
                            </label>
                            <textarea 
                            class="form-control" 
                            id="textarea1" 
                            rows="10">
                            </textarea>
                        </div>
                        <div class="form-group form-custom">
                            <label for="select1">Choose Task Priority</label>
                            <select class="form-control" id="select1">
                                <option>Very-Hot</option>
                                <option>Hot</option>
                                <option>Mild</option>
                                <option>Cool</option>
                            </select>
                        </div>
                        <button type="submit" onClick={createNewTask} class="btn btn-primary form-btn form-custom">Submit</button>
                    </form>
                </div>
                );
            }
        }
        ReactDOM.render(<NewTask/>, document.getElementById('forms'));
    }
    else if(i == 2) {
        class NewTask extends React.Component {
            render() {
                return (document.getElementById('new-task-card'));
            }
        }
        ReactDOM.render(<NewTask/>, document.getElementById('forms'));
        i = 0;
    }
} 

因此，总而言之，我希望能够继续渲染CreateNewTask以将更多的框输出到我的DOM。