Material-ui: Getting at the wrapped React component when exporting withStyles

[snydersaurus]

Is it possible to get at the React class wrapped by WithStyles?

Context: getting the ref to a child component e.g.

<MyComponent ref="myComponent"></MyComponent>

Trying to reference this.refs.myComponent gives me a WithStyles object obviously and not a MyComponent object.

[oliviertassinari]

@snydersaurus withStyles enhance the components with an innerRef property. You can use it.

<MyComponent innerRef={node => this.myComponent = node} />

---

Edit for v4: this workaround is no longer needed. You can simply provide a ref now.

[snydersaurus]

Thank you @oliviertassinari. I saw that innerRef mention in the docs but it wasn't clear how to use it.

[rolandjitsu]

@oliviertassinari I assume that the innerRef prop. does not support react's new createRef() object instead of a fn?

[oliviertassinari]

@rolandjitsu Why wouldn't it work? It should.

[rolandjitsu]

Because if I follow the example illustrated at createref-api and replace ref with innerRef, I get the following error:

index.js:2178 Warning: Failed prop type: Invalid prop `innerRef` of type `object` supplied to `WithStyles(DataPortal)`, expected `function`.
    in WithStyles(DataPortal) (created by Connect(WithStyles(DataPortal)))
    in Connect(WithStyles(DataPortal)) (created by App)
    in div (created by App)
    in App (created by WithStyles(App))
    in WithStyles(App) (created by Connect(WithStyles(App)))
    in Connect(WithStyles(App))
    in MuiThemeProvider
    in Provider

[oliviertassinari]

@rolandjitsu Aside from the PropType we need to fix. Does the feature work?

[rolandjitsu]

@oliviertassinari yes it does 😄

[oliviertassinari]

@rolandjitsu Do you want to update the propTypes? :)

[rolandjitsu]

sure thing 😄

[DarkKnight1992]

damn it i spend 2 hrs trying to figure out what the problem... I think this should used as disclaimer instead ;). Love the work you guys are putting in

[oliviertassinari]

@DarkKnight1992 We have started using the forwardRef capability of React. We should be able to make this behavior native and remove the innerRef property in the future.

[dmitrydwhite]

Is there an example somewhere of how the forwardRef capability of React can be used with the MUI components, e.g. Typography or Grid item?

[eps1lon]

There is currently no ref forwarding happening. We have started the effort for some components with #13722 but some dependencies are currently blocking us.

[mbrucher]

I tried using:

innerRef={node => this.usernameRef = node}

But I got the following error:

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

I removed the createRef() usage, as it is not yet usable (any ETA?), but even the old pattern doesn't seem to work.

The goal was to get some values from a function triggered by a . Is tehre another pattern that I'm supposed to follow instead of using refs to get these values (and then use them in a backend request)?

[mbrucher]

@rolandjitsu Why wouldn't it work? It should.

Hi Roland, seems like there is still something missing, see my previous comment.

[joshwooding]

@mbrucher can you create a new issue with a reproduction please :)

[quoctoank4it]

I tried using:

innerRef={node => this.usernameRef = node}

But I got the following error:

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

I removed the createRef() usage, as it is not yet usable (any ETA?), but even the old pattern doesn't seem to work.

The goal was to get some values from a function triggered by a . Is tehre another pattern that I'm supposed to follow instead of using refs to get these values (and then use them in a backend request)?

thank you