J'ai un code comme celui-ci:
<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>
L'éditeur a une render()fonction comme celle-ci:
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 >
J'ai la fonction comme celle-ci à <List>'sonSelect
private onSelect(id: string, data: T) {
this.setState({
currentRow: data,
modifiedRow: data
})
}
<Editor>affichera une liste de /api/customeravec <List>, et enverra les valeurs sélectionnées aux onSelectaccessoires, qui à leur tour mettent à jour tous les <Column>enfants. Les données correspondent à l'ID de la colonne, par exemple:
data = [{
id: 0,
name: 'My Customer',
address: 'This is Address',
country: 'US',
tax: '010',
bank: 'HSBC',
account:: '89238882839304'
}, ... ]
Cette méthode que j'ai mise ici, ne fonctionne qu'avec les enfants directement sous <Editor>, mais pas sous <Group>.
Ma question est la suivante: comment puis-je mettre à jour en profondeur toutes les valeurs des enfants de <Column>as <Editor>lorsqu'un utilisateur a cliqué sur une valeur dans <List>. Je veux dire, effectuez une <Column>recherche dans tous les enfants et mettez à jour toutes les valeurs, peu importe où elles se trouvent, aussi longtemps que dans la <Editor>balise.
Toute aide est appréciée. Je vous remercie
Ok ... Cela cassera Typescript, je ne sais pas comment le taper correctement dans Typescript, mais celui-ci fonctionne.
private deepColumn(children: React.ReactNode) => any) {
return React.Children.map(children, child => {
if (child.props.children) {
child = React.cloneElement(child, {
children: this.deepColumn(child.props.children)
})
}
if (child.type.name == "Column") {
return <Column {...child.props} default={this.default} onChange={this.onChange.bind(this)} />
} else return child;
})
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots