使用动态生成的节点进行反应

Question

我刚刚开始使用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')
      );

另外，当我在父母身上做所有事情时，我一直在刷新后输入的文本框中失去焦点，如果我们可以避免它会很棒。

非常感谢您的见解。