Ref

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

/* 
Ref : 
1.字符串
2.回调函数
3.React.createRef() */

class App extends React.Component {

	constructor(props) {
  	super(props)
    this.myRef = React.createRef();
  }

	fun = () => {
  	//console.log(this.refs.demoInput.value)
  	//console.log(this.textInput.value)
  	console.log(this.myRef.current.value)
  }
  
  render() {
  	return (
    	<div>
        <!-- <input type="text" ref="demoInput" placeholder="please input"></input>
             <input type="text" ref={input => this.textInput = input} placeholder="please input"></input> -->
        <input type="text" ref = {this.myRef} placeholder="please input"></input>

        <button onClick = {this.fun}>Click</button>
        
    	</div>
    )
  }
}


let target = document.getElementById('root');
ReactDOM.render(<App />, target);