React将DOM引用暴露给父组件

Question

I'm learning from the docs but don't get the line below

inputRef={el => this.inputElement = el}

Why is there a = el at the end? Isn't inputRef just supposed to be a function to grab a reference to the input?

Answer 1

We can use ref in 2 ways, first way is pass a string value as a ref and access the component as:

inputRef="input"
...
myInput = this.refs.input

But this is an old way and it may be deprecated in next versions. The second way is to pass a function to ref, which fired when a component is mounted and ready to work. Also, this function will receive the target element as a parameter.

To clarify this moment let's write the same code in ES5:

inputRef={ function(input) {_this.inputElement = input;}

So, in this case, you've added inputElement key to parent component that contains the input. And you can access it via this.inputElement