Question

我有以下代码

 <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>

当我点击具有相似内容的“添加”按钮时，我想添加一个新行。

任何人都可以帮助或指导如何做到这一点

这是JS小提琴

LINKTOFIDDLE

谢谢

Answer 1

您需要稍微重新构建代码才能使其正常工作。粗略地说，没有这个块的目的的上下文，这就是我将如何处理它：

将表格行<tr>和内容提取到单独的组件中。
设置一个包含<tr>组件的至少一个副本的数组数据结构。假设您是React的新手，您可能会利用this.state来存储它。
设置Tableforbasictask以迭代数组并输出组件。
最后，您需要创建一个绑定到按钮的方法，该按钮会将组件的新副本推送到数组中。

最终，您不希望将组件本身存储在数组中，而是希望将数据存储在那里，然后循环遍历该数据并呈现组件。目前，希望这足以引导您找到满足您需求的解决方案。

Answer 2

如上面评论中提到的，您需要在某处管理行的状态：

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

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

如何在ReactJS的List视图中插入新Item

2 个答案: