Javascript 如何在ReactJS的列表视图中插入新项

我有以下代码

 <div id="content"></div>

      <script type="text/babel">

      var Tableforbasictask = React.createClass({

              render: function() {

                    return (
                              <form  class="table-responsive" onSubmit={this.handleSubmit}>

                               <table className="table table-bordered table-striped-col nomargin" id="table-data">
                                    <tr align="center">
                                        <td>Task  Name</td>
                                        <td>Standard Discription of Task</td>
                                        <td>Employee Comment</td>
                                        <td>Employee rating</td>
                                    </tr>

                                <tr>
                                    <td>
                                        <input
                                          className="form-control"
                                          type="text"
                                          placeholder="Your Taks Name"
                                        />
                                    </td>
                                    <td>
                                        <textarea 
                                          className="form-control" 
                                          placeholder="Say something..." >
                                          </textarea>
                                    </td>
                                    <td>
                                        <textarea 
                                          className="form-control" 
                                          placeholder="Say Comment..." >
                                          </textarea>
                                    </td>
                                    <td>
                                        <select className="form-control">
                                            <option value="">Option</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input 
                                            type="submit" 
                                            className="btn btn-default addButton" 
                                            value="Add" />
                                    </td>
                                </tr>
                              </table>
                              </form>
                    );
                  }
            });

            var BasicTask = React.createClass({

                render: function() {
                  return (

                    <div className="downloadlinks">
                           <Tableforbasictask />
                    </div>

                  );
                }
            });

            var AttributeTask = React.createClass({

                render: function() {
                  return (

                    <div className="downloadlinks">
                           Hello I am an Attribute Component
                    </div>

                  );
                }

            });

        ReactDOM.render(<div><BasicTask /><AttributeTask /></div>, document.getElementById('content'));

      </script>
</div>

var Tableforbasictask=React.createClass({
render:function（）{
返回(
任务名称
任务的标准描述
员工意见
员工评级
选项
1.
2.
3.
4.
5.
);
}
});
var BasicTask=React.createClass({
render:function（）{
返回(
);
}
});
var AttributeTask=React.createClass({
render:function（）{
返回(
你好，我是一个属性组件
);
}
});
ReactDOM.render(

谢谢
您需要对代码进行一点重新构造，以使其正常工作。大致上，如果不考虑这一块的用途，我将采用以下方法：

将表格行
和内容提取到单独的组件中
设置一个数组数据结构，其中至少包含
组件的一个副本。如果您是新手，则可能会利用
此.state
来存储此副本
设置
Tableforbasictask
以迭代数组并输出组件
最后，您需要创建一个绑定到按钮的方法，该按钮将组件的新副本推送到数组中
最终，您不希望将组件本身存储在一个数组中，而是希望将数据存储在该数组中，然后循环该数据并呈现组件。目前，希望这足够让您找到一个满足您需要的解决方案。
您需要稍微重新构造代码，以使其正常工作。大致来说除了这一块的目的，以下是我将如何处理它：

将表格行
和内容提取到单独的组件中
设置一个数组数据结构，其中至少包含
组件的一个副本。如果您是新手，则可能会利用
此.state
来存储此副本
设置
Tableforbasictask
以迭代数组并输出组件
最后，您需要创建一个绑定到按钮的方法，该按钮将组件的新副本推送到数组中
最终，您不希望将组件本身存储在一个数组中，而是希望将数据存储在该数组中，然后循环该数据并呈现组件。目前，希望这足够让您找到一个满足您需要的解决方案。
如上面的注释所述，您需要管理som行的状态其中：

下面是一个列表组件的示例。单击“添加”按钮时，它会向列表中添加一个元素并更新状态。这会导致使用更新的列表重新渲染

class List extends React.Component {

   constructor() {
      this.state = {
         items: []
      }
   }

   add() {
      this.setState({ items.push(//some items)});
   }

   render() {

     let divItems = this.items.map( ( item, index ) => {
        return <div key={index}>{item.value}</div>
     });

     return (
       <div>
         {divItems}
         <button onClick={this.add}> Add </button>
       </div>
     );
   }
}

类列表扩展了React.Component{
构造函数（）{
此.state={
项目：[]
}
}
添加（）{
this.setState（{items.push（//some items）}）；
}
render（）{
让divItems=this.items.map（（项目，索引）=>{
返回{item.value}
});
返回(
{divItems}
添加
);
}
}
就像上面评论中提到的那样，您需要在某个地方管理行的状态：

下面是一个列表组件的示例。单击“添加”按钮时，它会向列表中添加一个元素并更新状态。这会导致使用更新的列表重新渲染

class List extends React.Component {

   constructor() {
      this.state = {
         items: []
      }
   }

   add() {
      this.setState({ items.push(//some items)});
   }

   render() {

     let divItems = this.items.map( ( item, index ) => {
        return <div key={index}>{item.value}</div>
     });

     return (
       <div>
         {divItems}
         <button onClick={this.add}> Add </button>
       </div>
     );
   }
}

类列表扩展了React.Component{
构造函数（）{
此.state={
项目：[]
}
}
添加（）{
this.setState（{items.push（//some items）}）；
}
render（）{
让divItems=this.items.map（（项目，索引）=>{
返回{item.value}
});
返回(
{divItems}
添加
);
}
}
您必须使用React-state来管理行。请看React-online的教程，如todo列表。您必须使用React-state来管理行。请看React-online的教程，如todo列表。这是在ES6中编写代码的一种方法吗？我从未在Javascript中编写过这样的类。您可以将其简化为JSF吗这是为了让我能更好地理解，现在我只是一个新手reactJs@Vikram是的，这是在es6中实现的。我在这里创建了一个JSFIDLE：这是在es6中编写代码的一种方法吗