0x00 前言
文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取
0x01 字符型的refs
refs就是document中的id
1.获取ref
class Demo extends React.Component {
render() {
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input type="text" placeholder="点击按钮提示数据" />
</div>
)
}
showData = () => {
console.log(this.refs.input1)
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
2.结构赋值
<script type="text/babel">
class Demo extends React.Component {
render() {
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} type="text" placeholder="点击按钮提示数据" />
</div>
)
}
showData = () => {
const {input1} = this.refs
alert(input1.value)
}
showData2=()=>{
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
3.字符串类型的refs 过时的原因
- 效率不高
0x02 回调函数的refs
1.实现
<script type="text/babel">
class Demo extends React.Component {
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>
)
}
showData = () => {
const {input1} = this
alert(input1.value)
}
showData2=()=>{
const {input2} =this
alert(input2.value)
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
2.调用次数
更新状态后,组件会填充为null,然后再进行调用
<script type="text/babel">
class Demo extends React.Component{
state={isHot:false}
render(){
const {isHot} =this.state
return (
<div>
<h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
<input ref= {(c)=>{this.input1=c;console.log(c)}} type="text"/>
<br/>
<br/>
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
showInfo = ()=>{
const {input1} =this
alert(input1.value)
}
changeWeather =()=>{
const {isHot} =this.state
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
3.类绑定的方式
<script type="text/babel">
class Demo extends React.Component{
state={isHot:false}
render(){
const {isHot} =this.state
return (
<div>
<h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
{/* <input ref= {(c)=>{this.input1=c;console.log(c)}} type="text"/>*/}
<input ref= {this.saveInput} type="text"/>
<br/>
<br/>
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
saveInput = (c)=>{
this.input1=c;
console.log(c)
}
showInfo = ()=>{
const {input1} =this
alert(input1.value)
}
changeWeather =()=>{
const {isHot} =this.state
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
0x03 createRef
React.createRef 是专人专用的,每一个ref都要单独重新创建
1.创建实例
<script type="text/babel">
class Demo extends React.Component{
myRef = React.createRef()
state={isHot:false}
render(){
const {isHot} =this.state
return (
<div>
<input ref= {this.myRef} type="text"/>
<br/>
<br/>
<button onClick={this.showInfo}>点我提示输入的数据</button>
</div>
)
}
showInfo = ()=>{
alert(this.myRef.current.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
other
欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源,技能树,面试题等。
以上