如何通过React ref命令替代父子组件间的长尾数据传递问题？

本文共计654个文字，预计阅读时间需要3分钟。

前言：我们在讨论受控组件的时候，经常会使用父子通信的方式进行数据传递，从而实现对组件的受控。但实际上，并非所有情况下都适用这种方案。当对表单组件进行受控处理时，我们通常会使用`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,我们实现了，但是明显看来是比较繁琐的，一直在传来传去的