Reactjs React处理动态生成的节点

我刚从React开始，我正在尝试创建一个列表，用户可以在其中输入记录编号，字段自动填充，并能够添加/删除行，更新行，然后保存

到目前为止，我成功地搜索并更新了我手动插入的两个空行（我还不知道如何让“添加”按钮工作），但我需要添加该功能，以及删除一行的能力，同时保留所有其他内容，包括用户在其他行上更新的任何值

我一直在使用setState，并尝试在父级中执行，但无法使其正常工作，以下是我迄今为止的代码：

      var empty_item = {
        "id": "",
        "order_id": "",
        "status": "",
        "currency": "",
        "authorized_service_cents": "",
        "authorized_mileage_cents": "",
        "zen_id": "",
        "parent_zen_id": "",
        "ffs": "",
        "wotypetext": "",
        "first_name": "",
        "last_name": "",
        "phone_number": "",
        "secondary_phone_number": "",
        "z_cx_id": "",
        "email": ""
      }

      var WorkOrderTableRow = React.createClass({
        getInitialState: function(){
          return {
            item: empty_item,
            notice: '',
            notice_class: 'hide_notice'
          };
        },
        getWO: function(event){
          console.log("In Get WO");
          if(event.target.value && event.target.value.length >= 7){
            console.log(event.target.value);
            var url = "/api/wo/" + event.target.value;
            $.ajax({
              url: url,
              dataType: 'json',
              cache: false,
              success: function(result) {
                if(result.rows && result.rows.length > 0){
                  this.setState({item: result.rows[0], notice: '', notice_class: 'hide_notice'});
                }else{
                  this.setState({item: empty_item, notice: result.message, notice_class: 'show_notice red-bg'});
                }
                console.log(result);
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(url, status, err.toString());
              }.bind(this)
            });
          }else{
            this.setState({item: empty_item, notice: '', notice_class: 'hide'});
          }
        },
        handleWOChange: function(event){
          this.getWO(event);
          // this.state.data()
        },
        render: function(){
          return(
            <tr className="workOrderTableRow formRow wrapper">
              <td className="w_192">
                <input type="text" ref="wo" onChange={this.handleWOChange}/>
                <span className="tooltip">
                    <span className={this.state.notice_class}>{this.state.notice}</span>
                </span>
              </td>
              <td>
                <div className="w_70">{this.state.item.parent_zen_id}</div>
              </td>
              <td>
                <div className="w_192">{this.state.item.first_name} {this.state.item.last_name}</div>
              </td>
              <td>
                <div className="w_192">{this.state.item.wotypetext}</div>
              </td>
              <td>
                <div className="w_70">{this.state.item.authorized_service_cents / 100}</div>
              </td>
              <td>
                <div className="w_70">{this.state.item.authorized_mileage_cents /100}</div>
              </td>
              <td>
                <input type="text" className="w_70" placeholder="" value={this.state.item.amount_cents}/>
              </td>
              <td>
                <TaxCodeList tax_code_id={this.state.item.tax_code_id}/>
              </td>
              <td>
                <ExpenseTypeList expense_type={this.state.item.expense_type} />
              </td>
              <td>
                <input type="checkbox" className="pointer" />
              </td>
              <td>
                <input type="button" className="btn-small row-extra remove-row red-bg pointer" value="X" />
              </td>
            </tr>
          );
        }
      });

      //This is a component
      var MainWrapper = React.createClass({
        render: function(){
          return(
            <div className="mainWrapper wrapper">
              This is the main wrapper
              <InvoiceWrapper />
              <ResultWrapper />
            </div>
          );
        }
      });

      var ResultWrapper = React.createClass({

        render: function(){
          var getWO = this.getWO;

          return(
            <div className="resultWrapper wrapper">
              <div className="resultListWrapper wrapper">
                Results show here
              </div>
              <div className="entriesWrapper wrapper">
                <form>
                  <table className="work_order_table" cellPadding="0" cellSpacing="0">
                    <tbody>
                      <tr className="formRow wrapper table_header">
                        <td className="w_192">Work Order #</td>
                        <td className="w_70">Case</td>
                        <td className="w_192">Customer</td>
                        <td className="w_192">Service</td>
                        <td className="w_70">Auth Amt.</td>
                        <td className="w_70">Auth Mil.</td>
                        <td className="w_70">Amount</td>
                        <td className="w_70">Tax Code</td>
                        <td className="w_192">Expense Type</td>
                        <td className="w_70"></td>
                        <td className="w_70"></td>
                      </tr>
                      <WorkOrderTableRow />
                      <WorkOrderTableRow />
                      <tr className="saveRow wrapper">
                        <td colSpan="10" className="left-text">
                          <input type="button" id="post" name="post" className="post btn pointer green-bg" value="POST" />
                          <input type="button" id="save_post" name="save_post" className="save_post btn mar-lft-5 pointer orange-bg" value="SAVE & POST" />
                        </td>
                        <td>
                          <input type="button" className="btn-small row-extra add-row green-bg pointer" value="+" />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </form>
              </div>
            </div>
          );
        }
      });

      ReactDOM.render(
        <MainWrapper />,
        document.getElementById('content')
      );

var empty\u项目={
“id”：“，
“订单号”：“，
“状态”：“状态”，
“货币”：“，
“授权服务”：“，
“授权里程”：“授权里程”，
“zen_id”：“，
“父项id”：“，
“ffs”：“，
“wotypetext”：“，
“名字”：“，
“姓氏”：“，
“电话号码”：“，
“辅助电话号码”：“，
“z_cx_id”：“，
“电子邮件”：”
}
var WorkOrderTableRow=React.createClass({
getInitialState:函数（）{
返回{
项目：空项目，
注意：''，
通知类：“隐藏通知”
};
},
getWO：函数（事件）{
console.log（“登录获取WO”）；
if（event.target.value&&event.target.value.length>=7）{
日志（event.target.value）；
var url=“/api/wo/”+event.target.value；
$.ajax({
url:url，
数据类型：“json”，
cache:false，
成功：功能（结果）{
if（result.rows&&result.rows.length>0）{
this.setState（{item:result.rows[0]，注意：“”，注意类：'hide\u notice'}）；
}否则{
this.setState（{item:empty_item，notice:result.message，notice_class:'show_notice red bg'}）；
}
控制台日志（结果）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
错误（url、状态、err.toString（））；
}.绑定（此）
});
}否则{
this.setState（{item:empty_item，notice:''，notice_class:'hide'}）；
}
},
HandleVoChange:函数（事件）{
这个.getWO（事件）；
//this.state.data（）
},
render:function（）{
返回(
{this.state.notice}
{this.state.item.parent\u zen\u id}
{this.state.item.first_name}{this.state.item.last_name}
{this.state.item.wotypetext}
{this.state.item.authorized_service_cents/100}
{this.state.item.authorized_miliety_cents/100}
);
}
});
//这是一个组件
var MainWrapper=React.createClass({
render:function（）{
返回(
这是主包装
);
}
});
var ResultWrapper=React.createClass({
render:function（）{
var getWO=this.getWO；
返回(
结果显示在这里
工作指令#
案例
顾客
服务
授权金额。
授权密耳。
数量
税法
费用类型
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);

另外，当我尝试在家长中做任何事情时，我总是在刷新后输入的文本框中失去焦点，如果我们可以避免的话，那就太好了

---

非常感谢您的见解。

请将JSFIDLE或codepen链接与代码一起发布，并缩小问题陈述的范围。好的，这是一个内部API，因此我不知道如何使其工作，我对react了解不够，因此无法改为使用文件，但这是链接。你看过todomvc的例子吗？我看过了，但由于我的知识有限，它有点复杂。不幸的是，tehre是一个指导你创建它的教程吗？