react的refs属性

refs属性的意义是标识,相当于原生js中的id,可以通过this.refs.标识名来访问,获取到的是真实DOM
ref可以为:
string类型(不推荐,可能会出现问题)

回调函数类型:分为行内式和外部callback ref
React 将在组件挂载时,会调用 ref 回调函数并传入 DOM 元素,当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前,React 会保证 refs 一定是最新的。
如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。

// callback ref
class Demo extends React.Component {
  componentDidMount() {
    this.myRef.focus();
  }

  render() {
    return <input ref={(ele) => {
      this.myRef = ele;
    }} />;
  }


React.createRef
ref 的值根据节点的类型而有所不同:
当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性。

class Demo extends React.Component{
            myRef = React.createRef()
            myRef1 = React.createRef()
            showData = ()=>{
                alert(this.myRef.current.value)
            }
            showData1 = ()=>{
                alert(this.myRef1.current.value)
            }

            render(){
                // React.createRef()调用后可返回一个容器,该容器可存储被ref所标识的节点,该容器专人专用
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                        <button onClick={this.showData}>点我提示左侧数据</button>
                        <input ref={this.myRef1} type="text" onBlur={this.showData1} placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo a={1} b={2} />,document.getElementById('test'))

你可能感兴趣的:(React,reactjs)