react学习历程10——初识refs

前面已经学了react中的两大属性，state和props，props是组件的属性，其重要特点是不可变，state是组件的状态，react根据state的变化重新渲染组件。

refs，其实咱可以简单理解为组件内标签的唯一标识，就是id，只不过react使用了refs来代替。为什么，原因其实也很简单，如果使用id操作的又回到了真实的DOM，所以必须使用refs来取代之。

使用的三种方式：

1. 字符串形式的ref（官网已经不推荐使用，并表示在以后的版本中可能会被弃用）
2. 回调形式的ref
3. 创建容器形式的ref

需求：自定义组件，功能如下

1. 点击按钮，提示第一个输入框中的值；
2. 第二个输入框失去焦点时，提示该输入框中的值。

字符串形式的ref（由于这个官网已经弃用，所以我们尽量不要使用，学这个只是为了能读懂他人的代码）

class RefsDemo extends React.Component {

    input1_click = () => {
        const {input1} = this.refs;
        alert(input1.value);

    }

    input2_blur = () => {
        const {input2} = this.refs;
        alert(input2.value);
    }

    render() {
        return (
            <div>
                <input ref="input1" type="text"/>&nbsp;
                <button onClick={this.input1_click}>点我展示输入内容</button>
                &nbsp;
                <input ref="input2" onBlur={this.input2_blur} type="text"/>
            </div>
        )
    }
}

其实你如果使用的是IDE的话，你已经发现，this.refs是这个样子的，所以这种方法就不要再使用了。

另外，由于本人并非前端出身，测试人员，JS的基础很薄弱，在编写上面这段代码的时候，出现了一个错误，就是const input1=this.refs;没有加{}，百度也没查出个所以然，我自己理解了一下，可能不正确，在做object（即python中的字典）赋值时，可以直接找key，给过去的就是该key对应的value。

回调形式的ref

class RefsDemo extends React.Component {

    input1_click = () => {
        alert(this.input1.value);

    }

    input2_blur = () => {
        alert(this.input2.value);
    }

    save_input2 = (current) => {
        this.input2 = current;
    }

    render() {
        return (
            <div>
                <input ref={current => this.input1 = current} type="text"/><br/>
                <button onClick={this.input1_click}>点我展示输入内容</button>
                &nbsp;
                <input ref={this.save_input2} onBlur={this.input2_blur} type="text"/>
            </div>
        )
    }
}

其中，回调有如上两种书写方式，区别在于input1每次调用，react调用了两次，input2则只调用了一次，但就咱书写而言，明显input1优于input2，且react官网也明确说了，这无关紧要，所以推荐使用input1的书写方式

创建容器形式的ref

class RefsDemo extends React.Component {

    input1 = React.createRef();
    input2 = React.createRef();

    input1_click = () => {
        const {input1} = this;
        alert(input1.current.value);

    }

    input2_blur = () => {
        const {input2} = this;
        alert(input2.current.value);
    }


    render() {
        return (
            <div>
                <input ref={this.input1} type="text"/>&nbsp;
                <button onClick={this.input1_click}>点我展示输入内容</button>
                &nbsp;
                <input ref={this.input2} onBlur={this.input2_blur} type="text"/>
            </div>
        )
    }
}

该方法是react官网推荐使用的方法，但该方法有一个重要的缺点，就是需要使用几个标签，则需要创建多少个ref，比较麻烦，如果简单使用的话，还是使用回调比较方便。

 

扩展

ref作为react标签属性时，有一个默认入参，就是该标签。注意input2使用的回调形式的ref时，就传入了该current。

html中将所有行为都称之为事件，例如上面用到的点击和焦点，都称之为事件。而在react中所有事件都有一个默认入参，就是该标签事件event，event是一个复杂的对象，我暂时也不是很了解，但之中有一个target的key，存储的就是该标签，所以：当操作的标签为自身的时候，可以无需使用refs，而直接使用事件属性target即可。

    input2_blur = (event) => {
        console.log(event);
        console.log(event.target);
        console.log(event.target.value);
    }


    render() {
        return (
            <div>
                <input ref={this.input2} onBlur={this.input2_blur} type="text"/>
            </div>
        )
    }