In React refs can be used to access DOM elements and other child components in the page. We use ReactDOM.findDOMNode to get the instance of other react components in the page. Once we get the instance we can access the components.
In this example we have 2 components HelloRefComponent is the parent component and HelloChildComponent is the child component. We create a ref (ref="refComponent") to the child component and use it in the parent component to set the focus on the child component. We use ReactDOM.findDOMNode to get the instance of the child component and set the focus.
ReactDOM.findDOMNode(this.refs.refComponent)
Make sure to include the required libraries like react, react-dom, bable etc. In this example i am using my local files, you can use your local files or use an appropriate CDN link to refer these libraries.
<html>
<head>
<script src="script/react.js"></script>
<script src="script/react-dom.js"></script>
<script src="script/browser.js"></script>
<script type="text/babel">
var HelloRefComponent = React.createClass({
onClick: function(event) {
var compInstance = ReactDOM.findDOMNode(this.refs.refComponent);
compInstance.scrollIntoView();
},
render: function () {
return (
<div>
<div style={{height:'900px', width: '200px', display:'block', backgroundColor:'silver'}}>
<span>Hello from Parent Component</span><br/>
<input
type="button"
value="Click to view Child Component"
onClick={this.onClick}
/>
</div>
<div>
<HelloChildComponent ref="refComponent"/>
</div>
</div>
);
}
});
var HelloChildComponent = React.createClass({
render: function () {
return (
<div style={{height:'100px', width: '200px', display:'block', backgroundColor:'wheat'}}>
<span>Hello from Child component</span>
</div>
);
}
});
ReactDOM.render(
<div>
<HelloRefComponent/>
</div>, document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"/>
</body>
</html>
In this example we have 2 components HelloRefComponent is the parent component and HelloChildComponent is the child component. We create a ref (ref="refComponent") to the child component and use it in the parent component to set the focus on the child component. We use ReactDOM.findDOMNode to get the instance of the child component and set the focus.
ReactDOM.findDOMNode(this.refs.refComponent)
Make sure to include the required libraries like react, react-dom, bable etc. In this example i am using my local files, you can use your local files or use an appropriate CDN link to refer these libraries.
<html>
<head>
<script src="script/react.js"></script>
<script src="script/react-dom.js"></script>
<script src="script/browser.js"></script>
<script type="text/babel">
var HelloRefComponent = React.createClass({
onClick: function(event) {
var compInstance = ReactDOM.findDOMNode(this.refs.refComponent);
compInstance.scrollIntoView();
},
render: function () {
return (
<div>
<div style={{height:'900px', width: '200px', display:'block', backgroundColor:'silver'}}>
<span>Hello from Parent Component</span><br/>
<input
type="button"
value="Click to view Child Component"
onClick={this.onClick}
/>
</div>
<div>
<HelloChildComponent ref="refComponent"/>
</div>
</div>
);
}
});
var HelloChildComponent = React.createClass({
render: function () {
return (
<div style={{height:'100px', width: '200px', display:'block', backgroundColor:'wheat'}}>
<span>Hello from Child component</span>
</div>
);
}
});
ReactDOM.render(
<div>
<HelloRefComponent/>
</div>, document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"/>
</body>
</html>
No comments:
Post a Comment