react入门-refs
2023-09-14 09:00:17 时间
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>
相关文章
- 基于Node的React图片上传组件实现
- React 可视化开发工具 Shadow Widget 非正经入门(之五:指令式界面设计)
- 帮你理清React的生命周期
- [React] Use react styled system with styled components
- [React Testing] Write React Application Integration Tests with React Testing Library
- [React] Understand the React Hook Flow
- [React] Refactor a Class Component with React hooks to a Function
- [React] Close the menu component when click outside the menu
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React Fundamentals] Using Refs to Access Components
- [React Native] Reusable components with required propType
- [React Testing] Children with Shallow Rendering
- [React Testing] Reusing test boilerplate
- [React] Redux Toolkit notes
- [React] Use a lazy initializer with useState
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React Testing] Debug the DOM State During Tests using React Testing Library’s debug Function
- [React] as component prop
- [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React] Higher Order Components (replaces Mixins)
- [React] React Fundamentals: Dynamically Generated Components
- React.js 应用 UI 框架
- React + Redux 入门(一):抛开 React 学 Redux
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了