ref的应用

2022-03-11  本文已影响0人  水晶草720
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"))

上一篇 下一篇

猜你喜欢

热点阅读