React 中 refs 的作用是什么?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

React 中 refs 的作用是什么?

问问小秘 2019-11-22 14:19:18 156

React 中 refs 的作用是什么?

前端开发
分享到
取消 提交回答
全部回答(1)
  • 问问小秘
    2019-11-22 14:20:22

    Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:

    class CustomForm extends Component {
      handleSubmit = () => {
        console.log("Input Value: ", this.input.value);
      };
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <input type="text" ref={input => (this.input = input)} />
            <button type="submit">Submit</button>
          </form>
        );
      }
    }
    

    上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:

    function CustomForm({ handleSubmit }) {
      let inputElement;
      return (
        <form onSubmit={() => handleSubmit(inputElement.value)}>
          <input type="text" ref={input => (inputElement = input)} />
          <button type="submit">Submit</button>
        </form>
      );
    }
    
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程