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