首頁手記受控組件入門：初學者必讀指南

受控組件入門：初學者必讀指南

標簽：

JavaScript 前端工具 React

概述

受控组件是React中用于管理和处理表单元素状态的一种设计模式，通过将表单元素的值存储在组件的状态中，实现完全控制和动态更新。本文将详细介绍受控组件的基本概念、示例、与非受控组件的区别，以及在表单管理和数据同步中的应用场景。此外，还将探讨创建和使用受控组件的方法，并解决常见问题。本文将帮助读者全面了解受控组件入门知识。

受控组件简介

受控组件的基本概念

在Web开发中，表单是与用户交互的重要组成部分。React中的受控组件是一种特别的设计模式，用于管理和处理表单元素的状态。简单来说，受控组件是指由React组件直接控制的HTML表单元素，其中表单元素的值存储在React组件的状态（state）中，而不是在表单元素的HTML属性中。通过这种方式，React组件可以完全控制表单元素的行为，并轻松地响应用户的输入变化。

示例

import React, { Component } from 'react';

class SimpleInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value
    });
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

export default SimpleInput;

在上述示例中，SimpleInput组件控制一个<input>元素。输入框的值由组件的状态value控制，并且onChange事件处理程序用于更新组件的状态。

受控组件与非受控组件的区别

受控组件与非受控组件的主要区别在于它们如何管理表单元素的状态。

受控组件：

表单元素的值存储在React组件的状态中。
组件本身控制表单元素的行为。
表单元素的值由组件的状态决定。

非受控组件：

表单元素的值直接存储在表单元素的value属性中。
React组件不直接控制表单元素的行为。
表单元素的值由HTML表单元素本身管理。

示例

import React from 'react';

class NonControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Initial value'
    };
  }

  handleBlur = (event) => {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input
        value={this.state.value}
        onBlur={this.handleBlur}
      />
    );
  }
}

export default NonControlledInput;

在非受控组件中，value属性直接控制输入框的值。表单元素仅在失去焦点时更新状态，而不像受控组件那样实时更新。

受控组件的应用场景

表单管理

受控组件常用于表单管理，因为它们提供了更好的状态管理和事件处理。例如，当用户输入数据时，受控组件可以轻松地将输入数据存储在组件的状态中，并在表单提交时检索这些数据。

示例

import React, { Component } from 'react';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', this.state.username);
    console.log('Password:', this.state.password);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            name="username"
            type="text"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            id="password"
            name="password"
            type="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
        </div>
        <button type="submit">Login</button>
      </form>
    );
  }
}

export default LoginForm;

在这个示例中，LoginForm组件管理一个简单的登录表单。表单元素的值存储在组件的状态中，并且在表单提交时输出这些值。

数据同步

受控组件还用于数据同步，特别是在需要实时更新表单元素值的情况下。例如，当用户在一个输入框中输入数据时，另一个输入框的值可能需要相应地更新。

示例

import React, { Component } from 'react';

class SynchronizedInputs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input1: '',
      input2: ''
    };
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          name="input1"
          value={this.state.input1}
          onChange={this.handleInputChange}
        />
        <input
          type="text"
          name="input2"
          value={this.state.input2}
          onChange={this.handleInputChange}
        />
      </div>
    );
  }
}

export default SynchronizedInputs;

在这个示例中，SynchronizedInputs组件有两个输入框，它们的值是同步的。当一个输入框发生变化时，另一个输入框的值也会更新。

创建简单的受控组件

使用HTML和JavaScript构建

虽然React主要使用JSX语法来构建组件，但在某些情况下，你可以使用纯HTML和JavaScript来实现受控组件。这种方式虽然不常见，但在特定场景下可能会有用。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Controlled Component</title>
</head>
<body>
<div id="output"></div>
<script>
  class SimpleControlledComponent {
    constructor() {
      this.textInput = null;
      this.state = {
        value: ''
      };
    }

    handleInputChange(event) {
      this.state.value = event.target.value;
      document.getElementById('output').innerText = this.state.value;
    }

    render() {
      const inputElement = document.createElement('input');
      inputElement.type = 'text';
      inputElement.value = this.state.value;
      inputElement.addEventListener('input', this.handleInputChange.bind(this));

      document.body.appendChild(inputElement);
      document.body.appendChild(document.createElement('div').appendChild(document.createTextNode('Current value: ')).appendChild(document.createElement('span').appendChild(document.createTextNode(this.state.value))));
    }
  }

  const component = new SimpleControlledComponent();
  component.render();
</script>
</body>
</html>

在这个示例中，我们创建了一个简单的受控组件，使用纯JavaScript来管理<input>元素的值。

使用React构建

使用React构建受控组件通常涉及以下步骤：

创建一个React组件。
在组件的状态中存储输入框的值。
为输入框绑定value属性和onChange事件处理程序。

示例

import React, { Component } from 'react';

class SimpleControlledComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value
    });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

export default SimpleControlledComponent;

在这个示例中，SimpleControlledComponent组件管理一个文本输入框，其值由组件的状态控制。

受控组件的常见问题与解决方法

输入值更新不及时

在某些情况下，输入值可能不会立即更新到组件的状态。这是因为React组件在事件处理程序执行之前不会重新渲染。为了确保输入值及时更新，可以使用React.useEffect或生命周期方法componentDidUpdate来触发重新渲染。

示例

import React, { Component } from 'react';

class InputComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange = (event) => {
    this.setState({
      value: event.target.value
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.value !== this.state.value) {
      console.log('Value updated:', this.state.value);
    }
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

export default InputComponent;

在这个示例中，componentDidUpdate方法会在组件状态更新后执行，并打印新的值。

如何正确绑定事件处理函数

绑定事件处理函数时，确保使用this关键字正确的绑定上下文。如果使用类组件，通常在构造函数中绑定事件处理函数。如果使用函数组件，则可以使用箭头函数或React.useCallback来绑定事件处理函数。

示例

import React, { Component } from 'react';

class InputComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

export default InputComponent;

在这个示例中，我们使用构造函数来绑定handleChange事件处理函数，确保它在上下文中正确执行。

实践案例

创建一个登录表单

创建一个登录表单，通过受控组件来管理用户名和密码输入框。

示例

import React, { Component } from 'react';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', this.state.username);
    console.log('Password:', this.state.password);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            name="username"
            type="text"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            id="password"
            name="password"
            type="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
        </div>
        <button type="submit">Login</button>
      </form>
    );
  }
}

export default LoginForm;

在这个示例中，LoginForm组件创建了一个包含用户名和密码输入框的登录表单。表单元素的值由组件的状态管理，并在表单提交时输出这些值。

创建一个多选框选择器

创建一个多选框选择器，通过受控组件来管理用户的选择。

示例

import React, { Component } from 'react';

class MultipleChoiceSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: ['Option 1', 'Option 2', 'Option 3'],
      selectedOptions: []
    };
  }

  handleOptionChange = (event) => {
    const { name, checked } = event.target;
    let selectedOptions = [...this.state.selectedOptions];
    if (checked) {
      selectedOptions.push(name);
    } else {
      selectedOptions = selectedOptions.filter(option => option !== name);
    }
    this.setState({ selectedOptions });
  }

  render() {
    return (
      <div>
        {this.state.options.map(option => (
          <label key={option}>
            <input
              type="checkbox"
              name={option}
              checked={this.state.selectedOptions.includes(option)}
              onChange={this.handleOptionChange}
            />
            {option}
          </label>
        ))}
      </div>
    );
  }
}

export default MultipleChoiceSelector;

在这个示例中，MultipleChoiceSelector组件创建了一个多选框选择器，允许用户选择多个选项。每个选项的状态由组件的状态管理，并在用户勾选或取消勾选时更新。

总结与扩展阅读

受控组件的优势与局限

优势

更好的状态管理：受控组件将表单元素的值存储在React组件的状态中，方便进行状态管理和更新。
实时数据更新：输入数据可以实时更新到组件状态，使得表单元素的行为更加灵活和响应。
事件处理：通过事件处理程序可以轻松地处理输入变化，实现数据同步和表单提交。

局限

代码复杂性：在某些情况下，受控组件可能会使代码变得复杂，特别是在处理大量输入框时。
性能影响：频繁的状态更新可能会对性能产生影响，特别是在大型应用中。
非传统表单元素：对于某些非传统表单元素（如上传文件），使用受控组件可能更加复杂。

推荐资源与进一步学习的方向

React官方文档：React官方文档提供了详细的受控组件教程和示例。可以通过阅读文档来深入了解受控组件的概念和最佳实践。
慕课网：慕课网提供了许多关于React的在线课程，包括受控组件的详细讲解和实战案例。
Stack Overflow：Stack Overflow是一个问答社区，可以找到许多关于受控组件的问题和解决方案。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

Qyouu

手記
篇

粉絲

88

獲贊與收藏

414

關注作者，訂閱最新文章

閱讀免費教程

JavaScript 入門教程

80個小節 320821 2270

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

受控組件入門：初學者必讀指南

示例

示例

示例

示例

示例

示例

示例

示例

示例

示例

优势

局限

閱讀免費教程