1

When using material-ui(^1.0.0-beta.24) and adding JSS Styles to my component as such:

class Counter extends Component{ 
  getCount= () => {
   return this.state.count;
  }
}

export default withStyles(stylesJss)(Counter);

Accessing the counter component via the "ref" prop in the parent component like:

 <Counter ref={(ref) => this.counter = ref} />

this.counter results in a ProxyComponent object instead of the underlying Counter class due to the withStyles wrapper. I would like to access the Counter class and it's method(s) like such: this.counter.getCount() from the parent and use it as a standard React uncontrolled component. How can this be obtained?

MrMedicine
  • 53
  • 12
  • 1
    Do you really need the `ref`? In most cases it's not needed, what are you trying to achieve? – Crysfel Feb 01 '18 at 17:47
  • I'm trying to get a value from the Counter component in an "uncontrolled" fashion. In the parent I`d like to do something like this: let count = this.counter.getSomeValue(); – MrMedicine Feb 01 '18 at 17:51
  • Seems similar to : https://stackoverflow.com/questions/38077572/how-to-access-to-actual-component-when-using-ref-and-having-proxycomponent – MrMedicine Feb 02 '18 at 16:54

1 Answers1

0

You can access the wrapped components ref via the innerRef property

<Counter innerRef={(ref) => this.counter = ref} />
grantnz
  • 7,322
  • 1
  • 31
  • 38