Question

相关链接：how-to-pass-data-from-child-component-to-its-parent-in-reactjs

在父组件中：

ForkJoinPool.commonPool()

在子组件中

getData(val) {
    // do not forget to bind getData in constructor
    console.log(val);
}

render() {
    return(<Child sendData={this.getData}/>);
}

建议的解决方案是使用函数属性将值从子组件传递给父组件。

这就是elementUI库代码的样子：

demoMethod() {
    this.props.sendData(value);
}

在elementUI中，它们传递变量而不是函数。

elementUI如何使子组件和父组件具有双向数据绑定？

Answer 1

我快速查看the documentation for elementUI for React并发现它有点稀疏。真的没有足够的细节。

实际上有两种可能性：

文档根本不清楚。

查看the documentation for the Input component，没有提及onChange属性。这是疏忽吗？也许，因为props.onChange元素的来源中有Input的引用。

开发人员正在使用Form元素

以下是猜想 - 我没有详细研究过elementUI来源，说这就是它正在做的事情。

也就是说，在React中，父组件可以检查和修改子组件的属性。看一下elementUI的文档，看起来你应该做这样的事情：

<Form>
    <Input value={this.state.myValue} />
</Form>

当Form元素呈现时，可能会在onChange组件中添加新的道具（例如，Input）。它也可能正在操纵value的{{1}}属性，以根据需要对其进行修改以响应更改。这允许Input元素及其子元素处理Form / onChange属性更改的所有来回。

Answer 2

React中没有双向数据流。您可以将数据流想象为瀑布。根元素包含所有水（或：数据）并将其传递到组件树中。

如果您希望父组件知道数据，您需要将其保持在其状态并将其传递给父子组件。

阅读本文以获得详细解释：https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down

elementUI如何使子组件将数据传递给父组件？

2 个答案: