回调函数有3个特点：
ref绑定一个箭头函数作为回调函数，可以输出以下这段看下，ref绑定的箭头函数是会自己执行的
class Demo extends React.Component {
render() {
return (
<div>
<input ref={ () => { console.log(111) } } type="text" placeholder="点击右侧提示数据" />
</div>
)
}
}
回调函数能不能接参数呢？
可以
回调函数的参数是谁？
取决于谁调用了他，谁就是参数
class Demo extends React.Component {
render() {
return (
// 箭头函数没有自己的this，他找其外层函数的this去作为自己的this，所以以下的this指向组件的实例对象
<div>
<input ref={ (a) => { console.log(a) } } type="text" placeholder="点击右侧提示数据" />
)
}
}
可见参数是当前ref所在的dom节点
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回调函数形式的ref</title>
</head>
<body>
<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script type="text/babel">
// 回调函数的三个特点：1、我定义的函数 2、我没调这个函数 3、他自动执行了
// 回调函数能不能接参数？ —— 可以 参数是谁？ —— 取决于谁调用了他，谁就是参数
class Demo extends React.Component {
render() {
return (
// 箭头函数没有自己的this，他找其外层函数的this去作为自己的this，所以以下的this指向组件的实例对象
<div>
<input ref={ (currentNode) => { console.log(currentNode) } } type="text" placeholder="点击右侧提示数据" />
<button onClick={ this.clickData }>点击提示左侧输入的数据</button>
<input ref={ (currentNode) => { this.input2 = currentNode } } type="text" placeholder="失焦后提示数据" onBlur={ this.blurData }/>
</div>
)
}
clickData = () => {
const { input1 } = this
alert(input1.value)
}
blurData = () => {
const { input2 } = this
alert(input2.value);
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
</body>
</html>