react入门-refs
2023-09-14 08:58:55 时间
vue有ref来获取template里面的子组件/子元素,react当然也有:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> <script src="common/react.js"></script> <script src="common/react-dom.js"></script> <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script> <script type="text/babel"> class App extends React.Component { constructor(opts) { super(opts) this.focus = this.focus.bind(this) } focus() { //this.refs.amie获取的是原生的"<input ref="amie" type="text" />"DOM this.refs.amie.focus() } render() { return <div> <input ref="amie" type="text" /> <input type="button" value="focus" onClick={this.focus}/> </div> } } ReactDOM.render( <App />, document.getElementById('app') ) </script> </body> </html>
相关文章
- React技巧之发出http请求
- react路由权限设置
- 04-React路由5版本(高亮, 嵌套, 参数传递... )
- React源码学习入门(四)深入探究React中的对象池
- 逐步拆解React组件—Swipe轮播图
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
- Taro React组件使用(1) —— Overlay 遮罩层【渐入渐出动画遮罩层】
- 【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件?
- react源码分析:深度理解React.Context_2023-02-28
- 第120期:Next.js 和 React 到底该选哪一个?
- React源码学习入门(十)setState是怎么做到异步化的?
- React源码学习入门(十一)React组件更新流程详解
- 在React中使用 react-router-dom 编程式路由导航【含V5.x、V6.x】
- react源码中的协调和调度
- 带你实现react源码的核心功能
- React源码分析(三):useState,useReducer4
- React入门二:React脚手架的使用 | 8月更文挑战
- React入门八:Context
- React入门九:props深入
- 从 React 源码彻底搞懂 Ref 的全部 api
- 调查:React 仍然是使用最广泛的前端框架,TypeScript 是优先选项
- React 许可证虽严苛,但不必过度 react