React核心属性3: refs｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第4天

需求*:* 自定义组件*,* 功能说明如下*:*

1. 点击按钮*,* 提示第一个输入框中的值

2. 当第2个输入框失去焦点时*,* 提示这个输入框中的值

组件内的标签可以定义ref属性来标识自己

事件处理

\1. 通过onXxx属性指定事件处理函数(注意大小写)

1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件

2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

\2. 通过event.target得到发生事件的DOM元素对象

字符串形式的ref

首先这种形式是不推荐使用的。

过时 API：String 类型的 Refs：

如果你之前使用过 React，你可能了解过之前的 API 中的 string 类型的 ref 属性，例如 "textInput"。你可以通过 this.refs.textInput 来访问 DOM 节点。我们不建议使用它，因为 string 类型的 refs 存在一些效率上的问题。它已过时并可能会在未来的版本被移除

<script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this.refs
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>

回调形似的ref

ref 中写回调函数，传入的参数是什么呢？我们打印看一下

<script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>

CreateRef

使用 createRef API

React.createRef调用后可以返回一个容器，该容器可以存储被ref标识的节点。但是只能存放一个

<script type="text/babel">
        //创建组件
        class Demo extends React.Component{
            /* 
                React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
             */
            myRef = React.createRef()
            myRef2 = React.createRef()
            //展示左侧输入框的数据
            showData = ()=>{
                alert(this.myRef.current.value);
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                alert(this.myRef2.current.value);
            }
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>