Réagir aux références
Résultats de traduction:
React prend en charge un attribut très spécial Ref que vous pouvez utiliser pour vous lier à n'importe quel composant généré par render().
Réagir aux référencessyntaxe
Cette propriété spéciale vous permet de référencer l'instance de support correspondante renvoyée par render(). Cela garantit que vous obtenez toujours la bonne instance à tout moment.
Réagir aux référencesexemple
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>php.cn React 实例</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var MyComponent = React.createClass({ handleClick: function() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus(); }, render: function() { // 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs return ( <div> <input type="text" ref="myInput" /> <input type="button" value="点我输入框获取焦点" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('example') ); </script> </body> </html>
Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Recommandations populaires
- Les bases de React
- Implémentation du fil d'Ariane dans React à l'aide de React Router v6
- Réagissez aux opérations CRUD avec Axios et React Query
- Créer une application React évolutive : guide de l'architecture React JS
- Créer une application React évolutive : guide de l'architecture React JS
- Les essentiels de React Hooks