Réagir aux références
React prend en charge un attribut très spécial Ref que vous pouvez utiliser pour vous lier à n'importe quel composant sorti par render().
Cet attribut spécial 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.
Utilisez la méthode
pour lier un attribut ref à la valeur de retour de render :
<input ref="myInput" />
Dans un autre code, obtenez l'instance de support via this.refs :
var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();
Exemple complet
Vous pouvez obtenir le composant React actuel en utilisant ceci, ou utiliser ref pour obtenir la référence du composant L'exemple est le suivant :
Instance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.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
Dans l'instance, nous obtenons la référence de l'instance de support de la zone de saisie, la zone de saisie obtient le focus après que l'enfant clique sur le bouton.
Nous pouvons également utiliser la méthode getDOMNode() pour obtenir des éléments DOM
