美文网首页
ref的应用

ref的应用

作者: 水晶草720 | 来源:发表于2022-03-11 15:00 被阅读0次
import React, { Component } from 'react'
export default class app extends Component {
    a = 100
    myref=React.createRef()
  render() {
    return (
        <div>
            {/* <input ref="mytext" />
            <button onClick={() => { console.log("click1", this.refs.mytext.value); }}>add1 普通模式</button> */}
            <input ref={this.myref} />
            <button onClick={() => { console.log("click2", this.myref.current.value); }}>add2 严格模式</button>
            <button onClick={ this.handleClick.bind(this) }>add3 严格模式</button>
            /** <React.StrictMode></React.StrictMode>*/

      </div>
    )
    }
    handleClick = () => {
           console.log('click2',this.myref.current.value) 
    }
}

/**
 * 新的写法 
 * myRef= React.createRef()
 * 
 * <div ref={this.myRef}>Hello</div>
 * 
 * this.myRef.current
 */
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./01-base/06-ref"
ReactDOM.render(
    <React.StrictMode>
         <App>
        </App>
    </React.StrictMode>
    , document.getElementById("root"))

相关文章

网友评论

      本文标题:ref的应用

      本文链接:https://www.haomeiwen.com/subject/wincdrtx.html