1

我有这样的代码：

<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/customerwith的列表<List>，并将选定的值发送到onSelectprops，然后更新所有<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>标签内。

任何帮助表示赞赏。谢谢

4

2 回答 2

0

<Group />作为中间“层”将“阻止更改传播”-该组件不“消耗”任何道具，因此不了解更改。

您可以/需要：

  • 改变结构；
  • 传递将被更改的道具（并将强制在孩子中更新）；
  • 使用还原；
  • 使用上下文 API。
于 2018-11-25T17:50:05.117 回答
0

好的...这会破坏 Typescript，我不知道如何在 Typescript 中正确输入，但是这个有效。

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;
    })
}
于 2018-11-25T23:13:35.280 回答