how does elementUI make child component pass data to parent component?

Question

related links:how-to-pass-data-from-child-component-to-its-parent-in-reactjs

In Parent Component:

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

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

In Child Component:

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

The proposed solution is to use a function property to pass the value from the child to parent component.

This is how the elementUI library code look like:

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

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

In elementUI they pass a variable and not a function.

How does elementUI make the child and parent component have a two-way data binding?

do you refer to [this library](https://eleme.github.io/element-react/#/en-US/quick-start) or [elementalUI](http://elemental-ui.com/)? — trixn, Apr 16 '18 at 14:34

score 1 · Answer 1 · answered Apr 16 '18 at 14:42

I took a quick look at the documentation for elementUI for React and found it a bit sparse. There is not enough detail to really say.

There are really two possibilities:

The documentation is simply not clear.

Looking at the documentation for the Input component, there is no mention of an onChange property. Is this an oversight? Perhaps, because there is a reference to props.onChange in the source for the Input element.

The developers are doing something funky with the Form element

What follows is conjecture - I have not examined the elementUI source in enough detail to say that this is what it is doing.

That said, it is possible in React for a parent component to examine and modify the properties of children. Looking at the docs for elementUI, it appears you're supposed to do something like this:

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

When the Form element renders, it may be adding a new prop (say, onChange) into the Input component. It may also be manipulating the value property of the Input to modify it as necessary in response to changes. This allows the Form element and it's children to handle all the back-and-forth of onChange/value property changes.

score 0 · Answer 2 · answered Apr 16 '18 at 14:31

There is no two way data flow in React. You can imagine the data flow as a waterfall. The root element contains all the water (or: data) and passes it down in the tree of components.

If you want a parent component to be aware of the data, you need to keep it in its state and pass it down to the parents child components.

Read this for a detailled explanation: https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down

how does elementUI make child component pass data to parent component?

2 Answers2