<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入 rop-types.js 用于对属性标签属性进行限制 -->
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<!-- 引入 babel, 用于将 jsx 转为 js -->
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 此处一定要写 babel -->
<script type="text/babel">
/*
createRef
*/
class Demo extends React.Component {
/*
React.createRef 调用后返回一个容器,该容器可以存储被ref所标识的节点
*/
input1 = React.createRef()
input2 = React.createRef()
showData = ()=> {
alert(this.input1.current.value)
}
showData2 = ()=> {
alert(this.input2.current.value)
}
render() {
return (
<div>
<input ref={this.input1} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={this.input2} onBlur={this.showData2} type="text" palceholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
React.createRef 调用后返回一个容器
geekymv 发表于:2024-09-08 15:52:18 阅读数:271