脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React  ref 命令代替父子组件的数据传递

解析React ref 命令代替父子组件的数据传递问题

 更新时间：2022年08月19日 10:16:01   作者：Brave-AirPig  
这篇文章主要介绍了React - ref 命令为什么代替父子组件的数据传递,使用 ref 之后，我们不需要再进行频繁的父子传递了，子组件也可以有自己的私有状态并且不会影响信息的正常需求，这是为什么呢？因为我们使用了 ref 命令的话，ref是可以进行状态的传输

前言

我们在谈论受控组件的时候，会去使用父子通信的方式去进行数据传递，从而达到组件的受控，其实并非这一种方案，当我们对表单组件进行受控处理的时候，往往会使用 ref 命令去进行数据传递，使用传统的父子通信当然可以实现，只不过对于表单组件来说，ref 更加的便捷

使用父子通信解决表单域的数据传输问题

既然说是表单域组件，那么我们就写一个表单域组件出来

import React, { Component } from 'react';
import Field from './Field';

export default class App extends Component {
  render() {
    return (
      <section>
        <h1>登录页面</h1>

        <Field label="用户名" type="text"></Field>

        <Field label="密码" type="password"></Field>

        <button>Login</button>
        <button>clear</button>
      </section>
    );
  }
}
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <section style={{ backgroundColor: 'green' }}>
        <label htmlFor="">{this.props.label}</label>
        <input type={this.props.type} />
      </section>
    );
  }
}

接下来我们想点击登录，获取到用户名以及密码，点击清除会把表单中的数据清空

如果我们使用父子通信的方法来实现的话

父组件：

import React, { Component } from 'react';
import Field from './Field';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
    };
  }

  render() {
    return (
      <section>
        <h1>登录页面</h1>

        <Field
          label="用户名"
          type="text"
          value={this.state.username}
          iptValue={value => {
            this.setState({
              username: value,
            });
          }}
        ></Field>

        <Field
          label="密码"
          type="password"
          value={this.state.password}
          iptValue={value => {
            this.setState({
              password: value,
            });
          }}
        ></Field>

        <button
          onClick={() => {
            console.log({
              username: this.state.username,
              password: this.state.password,
            });
          }}
        >
          Login
        </button>
        <button
          onClick={() => {
            this.setState({
              username: '',
              password: '',
            });
          }}
        >
          clear
        </button>
      </section>
    );
  }
}

子组件：

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <section style={{ backgroundColor: 'green' }}>
        <label htmlFor="">{this.props.label}</label>
        <input
          type={this.props.type}
          value={this.props.value}
          onChange={e => {
            this.props.iptValue(e.target.value);
          }}
        />
      </section>
    );
  }
}

OK,我们实现了，但是明显看来是比较繁琐的，一直在传来传去的 🤨

ref是否更方便

使用 ref 之后，我们不需要再进行频繁的父子传递了，子组件也可以有自己的私有状态并且不会影响信息的正常需求，这是为什么呢？因为我们使用了 ref 命令的话，ref是可以进行状态的传输的 😀

获取用户信息

子组件有自己的状态，自己修改自己

子组件：

import React, { Component } from 'react';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      value: '',
    };
  }

  render() {
    return (
      <section style={{ backgroundColor: 'green' }}>
        <label htmlFor="">{this.props.label}</label>
        <input
          type={this.props.type}
          onChange={e => {
            this.setState({
              value: e.target.value,
            });
          }}
        />
      </section>
    );
  }
}

父组件通过 ref 可以直接拿到当前表单的虚拟DOM对象，里面的 state 属性中就有我们所需要的 value 值，非常的方便 😆

父组件：

import React, { Component } from 'react';
import Field from './Field';

export default class App extends Component {
  username = React.createRef();
  password = React.createRef();

  render() {
    return (
      <section>
        <h1>登录页面</h1>

        <Field label="用户名" type="text" ref={this.username}></Field>

        <Field label="密码" type="password" ref={this.password}></Field>

        <button
          onClick={() => {
            console.log({
              username: this.username.current.state.value,
              password: this.password.current.state.value,
            });
          }}
        >
          Login
        </button>
        <button>clear</button>
      </section>
    );
  }
}

然后就是我们的清除需求了，该怎么实现？我们不能直接修改对象中的 value 值，那么还是需要使用受控理念来解决这个问题：

清除表单数据

子组件：

import React, { Component } from 'react';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      value: '',
    };
  }

  render() {
    return (
      <section style={{ backgroundColor: 'green' }}>
        <label htmlFor="">{this.props.label}</label>
        <input
          type={this.props.type}
          value={this.state.value}
          onChange={e => {
            this.setState({
              value: e.target.value,
            });
          }}
        />
      </section>
    );
  }

  clear() {
    this.setState({
      value: '',
    });
  }
}

我们给子组件中定义了一个方法，给到了一个 value 值，只要父组件触发了这个方法，那么对应的 状态以及 UI 中的 value 值都将变为 空，那么父组件怎么来触发呢？还记得我们通过 ref.current 拿到了什么吗？没错，我想说的是：通过 ref 拿到的子组件，其中的方法父组件也可以使用

父组件修改部分：

<button
  onClick={() => {
    this.username.current.clear();
    this.password.current.clear();
  }}
>

到此这篇关于React - ref 命令为什么代替父子组件的数据传递的文章就介绍到这了,更多相关React - ref 命令代替父子组件的数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React组件间通讯传值实现详解

    React组件间通讯传值实现详解

    这篇文章主要介绍了React组件间通讯传值，react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理
    2022-11-11
  • useState 解决文本框无法输入的问题详解

    useState 解决文本框无法输入的问题详解

    这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • react redux入门示例

    react redux入门示例

    本篇文章主要介绍了react redux入门示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React + Node.js实现图片上传功能

    React + Node.js实现图片上传功能

    最近笔者在开发个人博客的后台管理系统,里面用到了图片上传相关的功能,在这里记录并分享一下,希望可以帮到大家,话不多说直接开始吧,感兴趣的朋友可以参考下
    2024-01-01
  • React实现多个场景下鼠标跟随提示框详解

    React实现多个场景下鼠标跟随提示框详解

    这篇文章主要为大家介绍了React实现多个场景下鼠标跟随提示框详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • React组件设计过程之仿抖音订单组件

    React组件设计过程之仿抖音订单组件

    这篇文章主要介绍了React组件设计过程之仿抖音订单组件的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • react-beautiful-dnd拖拽排序功能的实现过程

    react-beautiful-dnd拖拽排序功能的实现过程

    这篇文章主要介绍了react-beautiful-dnd拖拽排序功能的实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React组件通信的实现示例

    React组件通信的实现示例

    在React中,组件通信是一个重要的概念,它允许不同组件之间进行数据传递和交互，本文主要介绍了React组件通信的实现示例，感兴趣的可以了解一下
    2023-11-11
  • React Native 中添加自定义字体的方法

    React Native 中添加自定义字体的方法

    这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • React实现核心Diff算法的示例代码

    React实现核心Diff算法的示例代码

    这篇文章主要为大家详细介绍了React如何实现Diff算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-04-04

最新评论