How to access a ref using React-Redux >= v6.0?

Question

in React-Redux >= v6.0 connnect() options support a new parameter, forwardRef: boolean.

If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

So, in my HoC called 'WithFields' I write:

 [...]
 import Form from '.../components/form';

   const WithFields = (arg1, arg2) => (WrappedComponent) => connect(mapStateToProps, {someMethod}, null, {forwardRef: true})(class extends React.Component {
 [...]

   render(
        return(<WrappedComponent ref={ref => this.wrappedComponent = ref }/>)
    )
}

   [...]

   let Customer = WithFields('a', 'b')(Form);
    export default Customer;

Now, in a Ticket component, I would to get the Customer ref with a method, but how?

     import Customer from '....';

      class Ticket extends Component {

           SOME_METHOD_TO_GET_THE_REF_OF_THE_HOC_COMPONENT() {
                  ?????????
             }

           render() {
               [....]

               <Customer/> 
            }
   }

score 1 · Answer 1 · answered Jan 11 '20 at 16:09

Ok, re-checked also the React docs (https://reactjs.org/docs/refs-and-the-dom.html), this is how to implement ref to the wrapped component of an HoC that uses React-Redux for the state management.

hoc.js

[...]
 import Form from '.../components/form';

   const WithFields = (arg1, arg2) =>
   (WrappedComponent) =>
    connect(mapStateToProps, {someMethod}, null, {forwardRef: true})(class extends React.Component {
 [...]

   render(
        return(<WrappedComponent ref={ref => this.formComponent = ref }/>)
    )
}

   [...]

   let Customer = WithFields('a', 'b')(Form);
   export default Customer;

ticket.js


 import Customer from '....';

      class Ticket extends Component {

           constructor(props) {
              super(props);
               this.customer = React.createRef();
            }

           triggerCustomerMethod (e) {

                let form = ref.current.formComponent; // THIS IS HOW YOU GET THE <Form/> component wrapped in <Customer/> 

                // example: get the <Form/> state and use it as argument for Hoc onSubmit() method (that updates the Redux store)
                let state = form.state;

                form.props.onSubmit(state, e);
           };


           render() {
               [....]

               <Customer ref={this.customer}/>

               <Button onClick={this.triggerCustomerMethod.bind(this)} text="Save"/> // clicking on button we launch triggerCustomerMethod()
            }
   }

Adi · Answer 2 · 2020-01-11T15:24:14.010

-2

Pass this function from your Ticket component to the HOC as props

  getRef = (refvalue) => { setState({value: refValue})}

and inside the HOC consume props like this

 props.getRef(value of ref here)

Ticket component

  const Ticket = () => {
 const getRef = (value) => {
//do something with the value
}

return <Customer handleRef={getRef}/>
}

Customer Component

  const Customer = props => {
 OnChange = (refvalue) => {
 props.handleRef(refvalue)
}

return {....}
}

For more detailed answer check this How to pass data from child component to its parent in ReactJS?

edited Jan 11 '20 at 15:24

answered Jan 11 '20 at 14:04

Adi

164
1
11

Not, the returned component from the HOC is `Customer`. `Customer` is imported in `Ticket` and I want to get the `Customer` ref inside `Ticket`. – AmintaCode Jan 11 '20 at 14:55
I have just added the answer let me know if it's clear to you – Adi Jan 11 '20 at 15:02
No, it's not clear, what `setState` has to do with ref? – AmintaCode Jan 11 '20 at 15:07
You are just saving it as your state in your Ticket component. That's just an example you can do anything with the value there. – Adi Jan 11 '20 at 15:08
See the answer now I have explained it more now – Adi Jan 11 '20 at 15:15
I have added link about passing data from child component to parent component. Hope that will explain you more about this – Adi Jan 11 '20 at 15:25

How to access a ref using React-Redux >= v6.0?

2 Answers2