为react ref分配回调

Question

有这样一个简单的reactclass component：import React from"；反应"；；

class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}
focus() {
// Explicitly focus the text input using the raw DOM API
this.textInput.focus();
}
myRef2 = (input) => {
console.log("myRef2")
}
myRef3 = (input) => {
console.log("myRef3")
} 
render() {   
return (
<div>
<input
id ="i1"
type="text"
ref={(input) => { 
console.log("myRef1")
this.textInput = input; }
} />
<input
id ="i2"
type="text"
ref={this.myRef2} />
<input
id ="i3"
type="text"
ref={this.myRef3()} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}
export default CustomTextInput

这三种不同的裁判方式有什么区别：

1.

ref={(input(=>{console.log("myRef1"(this.textInput=input；}}

ref={this.myRef2}

ref={this.myRef3((}

#2和#3方法之间有区别吗？我是对的，在#2的情况下，我们将myRef2函数分配给ref，而在#3的情况下我们只调用myRef3(函数名称后的括号(？

Answer 1

#2是一种正确的方法：

<input
id ="i2"
type="text"
ref={this.myRef2} />

这意味着，

<input
id ="i2"
type="text"
ref={()=>this.myRef2} />

而#3意味着当执行javascript代码时，每次读取this.myRef3函数时都会调用它：

<input
id ="i3"
type="text"
ref={this.myRef3()} />

<input
id ="i3"
type="text"
ref={ console.log("myRef3")} />