react学习(16)字符串形式的ref

2022-08-17  本文已影响0人  哆啦C梦的百宝箱

1: 给标签打标识和id作用基本类似,当我们使用ref的时候,就不用通过document.getElementById的原生js形式去获取元素,减少操作dom
和vue中的ref,angular中的#,类似

<script type="text/babel">
        class Demo extends React.Component {
            render(){
                return (
                <div>
                    <input type='text' ref='input1' />&nbsp;
                    <button onClick={this.showDemo}>点击显示内容</button>&nbsp;
                    <input  onBlur={this.showDemo2} type='text' ref='input2' placeholder='失去焦点显示内容'/>
                </div> 
                )
            }
            showDemo=()=>{
                alert(this.refs.input1.value);
            }
            showDemo2=()=>{
                alert(this.refs.input2.value);
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'));
    </script>

2:对于字符串形式的ref,官方已经不推荐,推荐使用回调形式和createRef API的形式。

上一篇下一篇

猜你喜欢

热点阅读