对受控非受控组件的学习~~~

本文介绍了React中处理表单数据的两种方式——受控组件和非受控组件,详细讲解了受控组件的默认提交、表单处理以及textarea和select的使用。同时,文章探讨了refs的创建和类型,用于在特定场景下获取DOM元素或组件实例,以实现对DOM的直接操作。
摘要由CSDN通过智能技术生成

一. refs的使用

在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:

  • 管理焦点,文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库。
1. 创建ref的方式

如何创建refs来获取对应的DOM呢?目前有三种方式:

方式一:传入字符串
使用时通过 this.refs.传入的字符串格式获取对应的元素;

方式二:传入一个对象
对象是通过 React.createRef() 方式创建出来的;
使用时获取到创建的对象其中有一个current属性就是对应的元素;

方式三:传入一个函数
该函数会在DOM被挂载时进行回调,这个函数会传入一个 元素对象,我们可以自己保存;
使用时,直接拿到之前保存的元素对象即可;

import React, {
    PureComponent, createRef } from 'react'

export default class App extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.titleRef = createRef();
    this.titleEl = null;
  }

  render() {
   
    return (
      <div>
        <h2 ref="title">String Ref</h2>
        <h2 ref={
   this.titleRef}>Hello Create Ref</h2>
        <h2 ref={
   element => this.titleEl = element}>Callback Ref</h2>

        <button onClick={
   e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  changeText() {
   
    this.refs.title.innerHTML = "你好,react";
    this.titleRef.current.innerHTML = "你好,react";
    this.titleEl.innerHTML = "你好,react";
  }
}
2. ref节点的类型

ref 的值根据节点的类型而有所不同:

  • 当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;
  • 当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性;
  • 你不能在函数组件上使用 ref 属性,因为他们没有实例;

这里我们演示一下ref引用一个class组件对象:

import React, {
    PureComponent, createRef } from 'react';

class Counter extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.state = {
   
      counter: 0
    }
  }

  render() {
   
    return (
      <div>
        <h2>当前计数: {
   this.state.counter}</h2>
        <button onClick={
   e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
   
    this.setState(
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值