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

Question

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

父组件中的：

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

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

子组件中的：

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

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

这是elementUI库代码的样子：

class Example extends Component{
    //constructor()
    this.state={
        value:''
    }
}

render() {
    return (
        <Input value={this.state.value}></Input>
    );
}

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

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

Answer 1

我快速地看了一下用于React的elementUI文档，发现它有点稀疏。没有足够的细节可以真正说出来。

实际上有两种可能性：

1. 文件是不清楚的。

看看组件，没有提到onChange属性。这是疏忽吗？可能是因为在props.onChange元素的源代码中有对Input的引用。

1. 开发人员正在使用Form元素做一些有趣的事情。

下面的是猜测--我还没有详细地检查elementUI源代码，说这就是它正在做的事情。

也就是说，父组件可以检查和修改子组件的属性。查看elementUI的文档，您似乎应该这样做：

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

当Form元素呈现时，它可能在Input组件中添加一个新的支柱(例如，onChange)。它还可能操作Input的Input属性，以便根据需要对更改进行修改。这允许Form元素及其子元素处理onChange/value属性的所有来回更改。

Answer 2

在反应中没有双向数据流。你可以把数据流想象成瀑布。根元素包含所有的水(或: data)，并将其传递到组件树中。

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

请阅读以下内容，以获得一种不加修饰的解释：https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down