字符串的ref：
<!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">
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Mycomponent 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(<Mycomponent />,document.getElementById('root'));
</script>
</body>
</html>
回调函数形式的refs：
<!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">
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Mycomponent extends React.Component{
showData=()=>{
const {input1} = this;
alert(input1.value)
}
showData2=()=>{
const {input2} = this;
alert(input2.value)
}
render(){
return(
<div>
<input ref={current=>this.input1=current} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧数据</button>
<input ref={current=>this.input2=current} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
ReactDOM.render(<Mycomponent />,document.getElementById('root'));
</script>
</body>
</html>
createRef的使用:
<!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">
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Mycomponent extends React.Component{
myRef=React.createRef();
showData=()=>{
alert(this.myRef.current.value)
}
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮显示数据"/>
<button onClick={this.showData}>点击我提示左侧的数据</button>
</div>
)
}
}
ReactDOM.render(<Mycomponent />,document.getElementById('root'));
</script>
</body>
</html>
react注释方法:使用{/**/}
{}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
