三大核心属性分别是:state、props、refs
refs属性
组件内的标签可以定义refs属性来标识自己
字符串形式的ref
通过ref="input1"获取标签属性值
通过this.refs传值展现
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1_字符串形式的ref</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom,用于支持react操作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>
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this.refs
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {input2} = this.refs
alert(input2.value)
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
回调函数形式的ref
通过回调函数获取标签
完整代码:
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
const {input2} = this
alert(input2.value)
}
render(){
return(
<div>
<input ref={ c => this.input1 =c } type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={ c => this.input2 =c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
refs的内绑定回调和内联回调
相关代码:
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
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>
{/*<input ref={ c => this.input1 =c} type="text" placeholder="点击按钮提示数据"/><br/><br/>*/}
<input ref={this.saveInput}/><br/><br/>
<button onClick={this.showInfo}>点我提示左侧的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
createRef的使用
使用React.createRef()调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的。
相关代码:
<script type="text/babel"> //<!--此处一定要写babel-->
//创建组件
class Demo extends React.Component{
/*
React.createRef()调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
*/
myRef = React.createRef()
myRef2 = React.createRef()
showInfo = ()=>{
alert(this.myRef.current.value);
}
showInfo2 = ()=>{
alert(this.myRef2.current.value);
}
render(){
return(
<div>
<input ref={this.myRef} type="text" /><br/><br/>
<button onClick={this.showInfo}>点我提示左侧的数据</button>
<input onBlur={this.showInfo2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"></input>
</div>
)
}
}
ReactDOM.render(<Demo a="1" b="2" />,document.getElementById('test'))
</script>