持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

概念

React.createRef()调用后可以返回一个容器，该容器可以存储被ref所绑定的的节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Translate1 extends React.Component {
            myRef = React.createRef()
            showData = () => {
                alert(this.myRef.current.value)
            }

            render() {
                return (
                    <div>
                        <div>
                            请输入答案：<input ref={this.myRef} type='text'></input>
                        </div>
                        <button onClick={this.showData}>显示输入</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Translate1 />, document.getElementById('test'))
    </script>
</body>

</html>

React.createRef()是React最推荐的形式，但是比较麻烦，先要创建容器，需要把容器放在实例自身，然后在节点使用这个容器才能绑定。

相比之前的回调绑定更容易理解。Refs是使用属性创建的，React.createRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。

事件处理

（1）通过onXxx属性指定事件处理函数（注意大小写）上面代码中React使用的onClick，而原生的JavaScript使用的的是onclick，是自己的自定义的方法，为了更好的兼容性，React中的事件是通过事件委托方式处理的，为了高效
（2）通过event.target得到发生事件的DOM元素对象官网指出不要过度使用refs，发生事件的DOM元素与和要操作的DOM元素是同一个这里ref是可以省略的。例如我要在一个input标签做一个失去焦点事件中弹出输入内容的功能，这里就可以不用ref,而使用event.target JavaScript代码：

        class Translate1 extends React.Component {
            showData2=(event)=>{
                alert(event.target.value)
            }

            render() {
                return (
                    <div>
                        <input  onBlur={this.showData2}  type="text"></input>
                    </div>
                )
            }
        }
        ReactDOM.render(<Translate1 />, document.getElementById('test'))

这几乎跟原生的差不多，要在onBlur函数中传入event事件。

React 学习笔记（11）createRef（）使用

概念

事件处理