我刚刚开始使用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')
);
另外，当我在父母身上做所有事情时，我一直在刷新后输入的文本框中失去焦点，如果我们可以避免它会很棒。
非常感谢您的见解。