网站过期了,保定网站建设公司,湖州做网站公司,深圳市宝安区建设工程交易中心1.定义#xff1a;组件内的标签可以定义ref属性来标识自己。
2.使用ref的三种方法
字符串形式的ref #xff08;这个写法会慢慢替换掉#xff0c;所以尽量不要写字符串形式#xff09;
!DOCTYPE html
html langen
headmeta cha…1.定义组件内的标签可以定义ref属性来标识自己。
2.使用ref的三种方法
字符串形式的ref 这个写法会慢慢替换掉所以尽量不要写字符串形式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title1_字符串形式的ref/title
/head
bodydiv idtext/divscript src../../js/react.development.js/script script src../../js/react-dom.development.js/script script src../../js/babel.min.js/script script typetext/babelclass Demo extends React.Component{// 左侧left (){const input this.refs.input1alert(input.value)console.log(this.refs.input1)}// 右侧right (){const input this.refs.input2alert(input.value)}render(){return (divinput refinput1 typetext placeholder点击确定弹框 /button onClick{this.left}确定/buttoninput refinput2 onBlur{this.right} typetext placeholder失去焦点弹框 //div)}}ReactDOM.render(Demo /,document.getElementById(text))/script
/body
/html
回调形式的ref主推用这个形式写
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title2_回调形式的ref/title
/head
bodydiv idtext/divscript src../../js/react.development.js/script script src../../js/react-dom.development.js/script script src../../js/babel.min.js/script script typetext/babelclass Demo extends React.Component{// 左侧left (){console.log(,this)const input this.input1alert(input.value)console.log(this)}// 右侧right (){const input this.input2alert(input.value)}render(){return (divinput ref{(c){this.input1 c}} typetext placeholder点击确定弹框 /button onClick{this.left}确定/buttoninput ref{(c){this.input2 c}} onBlur{this.right} typetext placeholder失去焦点弹框 //div)}}ReactDOM.render(Demo /,document.getElementById(text))/script
/body
/html
createRef 创建 ref 容器这个相对来说比较麻烦一些 div idtext/div
script src../../js/react.development.js/script
script src../../js/react-dom.development.js/script
script src../../js/babel.min.js/script
script typetext/babelclass Login extends React.Component {createRef1 React.createRef()createRef2 React.createRef()left (){const input this.createRef1alter(input.value)}left (){const input this.createRef2alter(input.value)}render(){//这样写是把username和password 放在了login中如果还是很迷糊不知道在那的话可以在left函数中输出thisreturn (divinput ref{this.createRef1} typetext placeholder点击确定弹框 /button onClick{this.left}确定/buttoninput ref{this.createRef2} onBlur{this.right} typetext placeholder失去焦点弹框 //div)}}ReactDOM.render(Login /,document.getElementById(text))
/script
