0x00 Preface
- CTF encryption and decryption collection
- CTF Web Collection
- Cybersecurity knowledge base
- Traceability related
All the tools in this article can be followed by Haoyuedangkongw official account and send keywords to obtain tools.
0x01 character refs
refs is the id in the document
1. Get ref
class Demo extends React.Component {<!-- -->
render() {<!-- -->
return (
<div>
<input ref="input1" type="text" placeholder="Click the button to prompt data" /> & amp;nbsp;
<button onClick={<!-- -->this.showData}>Click the data on the left side of my prompt</button> & amp;nbsp;
<input type="text" placeholder="Click the button to prompt data" />
</div>
)
}
showData = () => {<!-- -->
console.log(this.refs.input1)
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
2. Structure assignment
<script type="text/babel">
class Demo extends React.Component {<!-- -->
render() {<!-- -->
return (
<div>
<input ref="input1" type="text" placeholder="Click the button to prompt data" /> & amp;nbsp;
<button onClick={<!-- -->this.showData}>Click the data on the left side of my prompt</button> & amp;nbsp;
<input onBlur={<!-- -->this.showData2} type="text" placeholder="Click the button to prompt data" />
</div>
)
}
showData = () => {<!-- -->
const {<!-- -->input1} = this.refs
alert(input1.value)
}
showData2=()=>{<!-- -->
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
3. Reasons why string type refs are obsolete
- low efficiency
0x02 refs of callback function
1. Implementation
<script type="text/babel">
class Demo extends React.Component {<!-- -->
render() {<!-- -->
return (
<div>
<input ref={<!-- -->c=>this.input1 = c} type="text" placeholder="Click the button to prompt data" /> & amp;nbsp;
<button onClick={<!-- -->this.showData}>Click the data on the left side of my prompt</button> & amp;nbsp;
<input ref={<!-- -->c=>this.input2 = c} onBlur={<!-- -->this.showData2} type="text" placeholder="Click the button to prompt data" />
</div>
)
}
showData = () => {<!-- -->
const {<!-- -->input1} = this
alert(input1.value)
}
showData2=()=>{<!-- -->
const {<!-- -->input2} =this
alert(input2.value)
}
}
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
2. Number of calls
After updating the state, the component is populated with null before calling
<script type="text/babel">
class Demo extends React.Component{<!-- -->
state={<!-- -->isHot:false}
render(){<!-- -->
const {<!-- -->isHot} =this.state
return (
<div>
<h2>The weather today is {<!-- -->isHot?'hot':'cool'}</h2>
<input ref= {<!-- -->(c)=>{<!-- -->this.input1=c;console.log(c)}} type="text"/>
<br/>
<br/>
<button onClick={<!-- -->this.showInfo}>Click on the data I am prompted to enter</button>
<button onClick={<!-- -->this.changeWeather}>Click me to change the weather</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. Class binding method
<script type="text/babel">
class Demo extends React.Component{<!-- -->
state={<!-- -->isHot:false}
render(){<!-- -->
const {<!-- -->isHot} =this.state
return (
<div>
<h2>The weather today is {<!-- -->isHot?'hot':'cool'}</h2>
{<!-- -->/* <input ref= {(c)=>{this.input1=c;console.log(c)}} type="text"/>*/}
<input ref= {<!-- -->this.saveInput} type="text"/>
<br/>
<br/>
<button onClick={<!-- -->this.showInfo}>Click on the data I am prompted to enter</button>
<button onClick={<!-- -->this.changeWeather}>Click me to change the weather</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 is dedicated to dedicated personnel, and each ref must be recreated separately.
1. Create an instance
<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}>Click on the data I am prompted to enter</button>
</div>
)
}
showInfo = ()=>{<!-- -->
alert(this.myRef.current.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
other
Welcome everyone to follow my friend’s public account Haoyuedangkongw to share vulnerability information and various learning resources, skill trees, interview questions, etc.
above