effect:
To obtain a specified dom.
Use (overuse is not recommended):
First: management focus, text selection, media player (media playback)
Second: trigger the animation
Third: integrate third-party DOM library
Usage DEMO:
Click the submit button, the value will be printed to the console input, but be aware that this approach is outdated.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="content"></div>
<script type="text/babel">
super (props);
// constructor in the initialization module performs
class the extends the Component React.Component {
// definition component
constructor (props) {
= {this.state
name: 'Tom',
Age: 20 is
}
this.handleSubmit = this.handleSubmit.bind (the this)
}
// Get dom departure event and the attribute value
handleSubmit (E) {
//e.preventDefault () ;
// obsolete use, may be removed in future versions of
the let inputDom = this.refs.name;
// value prop console printing
the console.log (inputDom.value);
}
the render () {
// 1, the input tag added to the ref attribute tag
return (
<form onSubmit = {this.handleSubmit}>
<input type="text" ref="name" />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(<Component />,document.getElementById("content"));
</script>
</body>
</html>
The new wording:
<! DOCTYPE HTML> <HTML>
<head>
<Meta charset = "UTF-. 8" />
<title> React the Tutorial </ title>
</ head>
<body>
<-! REACT base libraries ->
<Script = the src "https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"> </ Script>
<Script the src = "https://cdnjs.cloudflare.com/ajax/libs /react/0.14.3/react-dom.js "> </ Script>
<-! bable conversion library, ES grammar and syntax conversion Jax ->
<Script src =" https://cdnjs.cloudflare.com /ajax/libs/babel-core/5.8.23/browser.min.js "> </ Script>
<div the above mentioned id =" Content "> </ div>
<-! do not recommend excessive use ->
< ! - first: management focus, text selection, media player (media playback) ->
<- Second:! Trigger the animation ->
<- Third:! DOM integrate third-party libraries ->
<Script of the type = "text / babel">
// Custom Components
{React.Component the extends the Component class
// constructor in the initialization module performs
constructor (The props) {
Super (The props);
this.state = {
name: 'Tom',
Age: 20 is
}
this.handleSubmit = the this. handleSubmit.bind (the this)
}
// Get dom departure event and the attribute value
handleSubmit () {
the console.log (this.inputName.value);
}
the render () {
//. 1, the input tag added to the ref attribute tags
return (
<div>
<input type="text" ref={(input) => { this.inputName = input }} />
<button type="submit" onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}
ReactDOM.render(<Component />,document.getElementById("content"));
</script>
</body>
</html>