<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>3_回调ref中回调执行次数的问题</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- react-dom,操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 此处一定要写babel -->
<script type="text/babel">
//1.创建组件
class Demo extends React.Component{
state = {isHot:true}
showInfo = ()=>{
const {input1} = this
alert(input1.value)
}
changeWeather = ()=>{
//获取原来的状态
const {isHot} = this.state
//更新状态
this.setState({isHot:!isHot})
}
saveInput = (c) =>{
this.input1 = c;
console.log('@', c);
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot ? '炎热' : '冰爽'}</h2>
{/* jsx注释如下 */}
{/*<input ref={(c)=>{this.input1=c;console.log('@',c);}} type="text"></input><br/>*/}
<input ref={this.saveInput} type="text"></input><br />
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById("test"));
</script>
</body>
</html>
=================
类联掉调2次（ <input ref={(c)=>{this.input1=c;console.log('@',c);}} type="text"></input><br/>）；第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。
===
绑定函数不会
