解析React 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,我们实现了,但是明显看来是比较繁琐的,一直在传来传去的

(0)

相关推荐

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

    前言 我们在谈论受控组件的时候,会去使用父子通信的方式去进行数据传递,从而达到组件的受控,其实并非这一种方案,当我们对表单组件进行受控处理的时候,往往会使用 ref 命令去进行数据传递,使用传统的父子通信当然可以实现,只不过对于表单组件来说,ref 更加的便捷 使用父子通信解决表单域的数据传输问题 既然说是表单域组件,那么我们就写一个表单域组件出来 import React, { Component } from 'react'; import Field from './Field'; exp

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • vue父子组件的数据传递示例

    1.父组件向子组件传递数据 <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需

  • angularjs2中父子组件的数据传递的实例代码

    父到子组件之间的数据传递 父组件模板中引用子组件 // father template: ... <child-item [name] = "fatherItemName" > </child-item> //...` 其中"fatherItemName" 为父组件中的属性,[name] 为子组件的输入 在子组件中使用 @Input() name 来接受父组件传递的值 如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性 _na

  • Vue 子组件与数据传递问题及注意事项

    在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题. 如何传递 父组件向子组件在进行传递时,使用的是 prop 特性进行传递. 约定 老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件: 子组件的 props 中定义要传递的变量名 变量名同组件的命名规范 父组件传值时,需要使用 短横线分隔命名 使用 v-bind 进行传值 定义 首先在子组件中定义: // Child.vue expo

  • React生命周期与父子组件间通信知识点详细讲解

    目录 声明周期 声明周期解析 生命周期函数 Constructor componentDidMount componentDidUpdate componentWillUnmount 不常用的生命周期函数 认识组件间的通信 参数propTypes 限制单个元素 默认 Prop 值 对于函数式组件 子组件传递父组件 声明周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能: 生命周期和

  • Vue中父子组件的值传递与方法传递

    一.Vue中父组件向子组件传值 利用v-bind向子组件传值,子组件中利用props接受 <div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p>

  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    目录 方式一:通过监听事件实现 方式二:通过 v-model 实现 方式一:通过监听事件实现 父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

随机推荐