解析React?ref?命令代替父子組件的數(shù)據(jù)傳遞問題

更新時間：2022年08月19日 10:16:01 作者：Brave-AirPig

這篇文章主要介紹了React?-?ref?命令為什么代替父子組件的數(shù)據(jù)傳遞,使用?ref?之后，我們不需要再進(jìn)行頻繁的父子傳遞了，子組件也可以有自己的私有狀態(tài)并且不會影響信息的正常需求，這是為什么呢？因?yàn)槲覀兪褂昧?ref?命令的話，ref是可以進(jìn)行狀態(tài)的傳輸

前言

我們在談?wù)撌芸亟M件的時候，會去使用父子通信的方式去進(jìn)行數(shù)據(jù)傳遞，從而達(dá)到組件的受控，其實(shí)并非這一種方案，當(dāng)我們對表單組件進(jìn)行受控處理的時候，往往會使用 ref 命令去進(jìn)行數(shù)據(jù)傳遞，使用傳統(tǒng)的父子通信當(dāng)然可以實(shí)現(xiàn)，只不過對于表單組件來說，ref 更加的便捷

使用父子通信解決表單域的數(shù)據(jù)傳輸問題

既然說是表單域組件，那么我們就寫一個表單域組件出來

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>
    );
  }
}

接下來我們想點(diǎn)擊登錄，獲取到用戶名以及密碼，點(diǎn)擊清除會把表單中的數(shù)據(jù)清空

如果我們使用父子通信的方法來實(shí)現(xiàn)的話

父組件：

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,我們實(shí)現(xiàn)了，但是明顯看來是比較繁瑣的，一直在傳來傳去的 ??

ref是否更方便

使用 ref 之后，我們不需要再進(jìn)行頻繁的父子傳遞了，子組件也可以有自己的私有狀態(tài)并且不會影響信息的正常需求，這是為什么呢？因?yàn)槲覀兪褂昧?ref 命令的話，ref是可以進(jìn)行狀態(tài)的傳輸?shù)???

獲取用戶信息

子組件有自己的狀態(tài)，自己修改自己

子組件：

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 可以直接拿到當(dāng)前表單的虛擬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>
    );
  }
}

然后就是我們的清除需求了，該怎么實(shí)現(xiàn)？我們不能直接修改對象中的 value 值，那么還是需要使用受控理念來解決這個問題：

清除表單數(shù)據(jù)

子組件：

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 值，只要父組件觸發(fā)了這個方法，那么對應(yīng)的狀態(tài)以及 UI 中的 value 值都將變?yōu)?空，那么父組件怎么來觸發(fā)呢？還記得我們通過 ref.current 拿到了什么嗎？沒錯，我想說的是：通過 ref 拿到的子組件，其中的方法父組件也可以使用

父組件修改部分：

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

到此這篇關(guān)于React - ref 命令為什么代替父子組件的數(shù)據(jù)傳遞的文章就介紹到這了,更多相關(guān)React - ref 命令代替父子組件的數(shù)據(jù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: