日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

解析React?ref?命令代替父子組件的數據傳遞問題_React

作者：Brave-AirPig ? 更新時間： 2022-10-16 編程語言

前言

我們在談論受控組件的時候，會去使用父子通信的方式去進行數據傳遞，從而達到組件的受控，其實并非這一種方案，當我們對表單組件進行受控處理的時候，往往會使用 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();
  }}
>

原文鏈接：https://blog.csdn.net/weixin_63836026/article/details/126390299

欄目分類
最近更新