Get component method via 'refs' from react-meteor-data constructor

react
1

Hello!

How can i get access to component method, wrapped react-meteor-data container?

For example this code will work.

export default class Main extends Component {
    constructor(props) {
        super(props);
    }
    openModal(){
      this.refs.modal.handleToogle()
    }
    render(){
      return(
        <div>
          <a href="#" onClick={this.openModal.bind(this)}>
          <Modal ref="modal" />  
        </div>
      )
    }  
}

export default class Modal extends Component {
  constructor(props){
    super(props);
    this.state = {
      open:false
    }
  }
  handleToogle() {
      this.setState({
          open: !this.state.open
      });
  }
}

But if i will wrap Modal component via create container i will can’t get access for Modal methods. Instead in ‘ref’ will store react-meteor-data constructor…

How can i get access to child component methods from parent component directly?
Thank you!

2

Not sure exactly what you are trying to do, but I think I recently did something similar. My click event was inside the Modal component along side of the default closed modal and only text displayed or rendered initally. So with this, I was able to handle open/close functionality inside the Modal component itself.

3

Thank you for reply!
But the question is how to get the child component methods, taking into account that the child-component is wrapped by meteor-react-data container.

Of course i can define states of modal component in parent, and it is a easiest way. But in fact, i want find more elegant decision.

May be react-meteor-data component have method, what can provide methods and states of wrapped component?

4

Not sure if you can access a child component’s refs directly, may someone can chime in for help on that one. But you can pass the parent back data by a calling a prop function that you passed to the child from that parent.

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.openModal = this.openModal.bind(this);
    }
    openModal(data){
      console.log(data);
    }
    render(){
      return(
        <div>
          <Modal openModal={this.openModal} />  
        </div>
      )
    }  
}

export default class Modal extends Component {
  constructor(props){
    super(props);
    this.state = {
      open:false
    }
  }
  handleToogle() {
      this.setState({
          open: !this.state.open
      });
  }
  render(){
     return(
      <div>
         <a href="#" onClick={this.props.openModal(passData)}> 
      </div>
     )
  }  
}

And you can access createContainer params or props:

export default createContainer(({ params }) => {

5

In your example you can use parent methods from child.
I need use child methods, from parent.

For example we have profile page.
And we wanna render Uploader-Modal component (child) when user click on “Change avatar” button in Profile (parent on this case) component. It is not problem, if Uploader-Modal not wrapped via create Container. But if it did, we can’t call show-toogle methods of this child component directly.

:confused:

6

Interesting concept of what you are trying to achieve. I was trying some things according to your snippet and once I got this error:

warning.js:36 Warning: MeteorDataContainer: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

Not sure if you’ve gotten that error already or if it helps you.

7

i can share full code example of widget, with files uploader:)
It is not fully completed, but it can clarify the situation)

Or may be @sashko can help with this question (
On the Rights of the superhero :slight_smile:)?

8

…tumbleweed sound… :slight_smile:

9

The createContainer implementation is straighforward and there is no direct way to do what you want. The container component would have to forward the call to the wrapped component and this seems cumbersome.

One way to solve this is to the main component pass a function that the child component uses to register the component instance (using ref on render). Something like this:

class Main {
  ...
  registerModal(component) {
    this.modal = component
  }
  ...
  render() {
    return 
  }
}

class Modal {
  ...
  render() {
    return  this.props.registerModal(c)}>
    ...
  }
}
1 Like
10

Actually the code above is not registering Modal instance, but the instance of the DIV… But in your case you will probably want to register the function that sets the state directly.

1 Like
11

I have the same problem.
It looks like they wanted to implement some functionality for that. Because in refs I found “setState” - which just doesn’t work, parameter “state” which shows me nothing. Totally lost all of the method, I created in the component and want to use in parent container. I can only smile and leave it as it is… @sashko Thank you.

12

its better to not dig out old threads. Maybe you start a new one and give us some code example?