我有这样的代码:
<Editor source="/api/customer" onCreate={this.debugChange} onDelete={this.debugChange} onUpdate={this.debugChange}>
<Group title="Address">
<Column id="id" label="ID" default={0} readonly />
<Column id="name" label="name" default="" />
<Column id="address" label="Address" default="" />
<Column id="country" label="Country" default={currentCountry} readonly source="/api/country" idfield="id" captionField="name" />
</Group>
<Group title="Payment">
<Column id="tax" label="TaxType" default={0} source="/api/taxtype" idfield="id" captionField="name" />
<Column id="bank" label="Bank" default="" source="/api/banks" idfield="id" captionField="bank"/>
<Column id="account" label="Account Number" default="" />
</Group>
</Editor>
编辑器有这样的render()
功能:
let components = React.Children.map(this.props.children, (child) => {
return <Column {...child.props} default={row[child.props.id]} onChange={this.onChange.bind(this)} />
})
return <div className="hx-editor">
<div className="hx-editor-list">
<List id={this.props.id + "-list"} source={this.props.source}
singleShow captionField={this.caption.bind(this)}
groupfn={this.props.group} onSelect={this.onSelect.bind(this)} />
</div>
<form name={"hx-form-" + this.props.id} className="hx-form">
{components}
{buttons}
</form>
</div >
我在<List>
's有这样的功能onSelect
private onSelect(id: string, data: T) {
this.setState({
currentRow: data,
modifiedRow: data
})
}
<Editor>
将显示来自/api/customer
with的列表<List>
,并将选定的值发送到onSelect
props,然后更新所有<Column>
子级。数据对应列的id,如:
data = [{
id: 0,
name: 'My Customer',
address: 'This is Address',
country: 'US',
tax: '010',
bank: 'HSBC',
account:: '89238882839304'
}, ... ]
我放在这里的这个方法,只适用于直接下的孩子<Editor>
,但不适用于下<Group>
。
我的问题是,<Column>
当<Editor>
用户单击<List>
. 我的意思是,<Column>
对所有子项执行搜索,并更新所有值,无论它们在哪里,只要在<Editor>
标签内。
任何帮助表示赞赏。谢谢