Skip to content

Instantly share code, notes, and snippets.

@edwardwbli

edwardwbli/ react-ref-demo.html

Created January 13, 2017 08:44
Show Gist options
  • Save edwardwbli/15be1c799a346ec397bf23fa5f9b1fe0 to your computer and use it in GitHub Desktop.
Save edwardwbli/15be1c799a346ec397bf23fa5f9b1fe0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
react-ref-demo.html
<!DOCTYPE html>
<html>
<head>
<title>React-App</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<style media="screen" type="text/css">
.todocontent, .inprogresscontent {
float: left;
position: relative;
left: 20%;
margin-left: 10px;
}
h1 {
margin-left: 20%;
}
li {
color: red;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
var App = React.createClass({
getInitialState: function() {
return {userInput:''};
},
handleChange: function(e) {
console.log("handleChange")
this.setState({userInput:e.target.value});
},
clearAndfoucsInput: function() {
this.setState({userInput:''}, function(){
console.log("change focus")
this.refs.theInput.focus();
});
},
render: function() {
/*ref in react component can give DOM node a name to be refered in component method, and then refered by this.refs.nameofDOMnode*/
return React.createElement("div", {id: "react-app-div"},
React.createElement("div", {onClick: this.clearAndfoucsInput}, "Click to foucus and Reset"),
React.createElement("input", {ref: "theInput", value:this.state.userInput, onChange: this.handleChange}));
}
});
ReactDOM.render(React.createElement(App, {}),
document.getElementById('app'));
</script>
</body>
</html>
@edwardwbli
Copy link
Author

This demo how to use ref in react to refer to a DOM node , and call node's focus method.
This demo also illustrate how to make a callback during this.setState.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment