第一种方式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script><script src="./node_modules/babel-standalone/babel.js"></script><script src="./node_modules/prop-types/prop-types.js"></script></head><!-- 我是组件<input type="text" ref="demo" placeholder="请输入"><button onClick={this.fun}>请输入输入框的值</button> --><body><div id="demoReact"></div><script type="text/babel">class Com extends React.Component{ fun=()=>{ console.log(this.refs.demo) }; render(){ return(<div><input type="text" ref="demo" placeholder="请输入" /><button onClick={this.fun}>请输入输入框的值</button></div>) } } ReactDOM.render(<Com />,document.getElementById("demoReact"));</script></body></html>运行结果
第二种方式
第三种方式
