前端学习（1598）：ref转发
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1598）：ref转发
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種方式
<!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>運行結果
?
第二種方式
第三種方式
總結
以上是生活随笔為你收集整理的前端学习（1598）：ref转发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（1958）vue之电商管理系统
- 下一篇： 前端学习（1553）：复习2