首页手记 React中的受控组件入门教程

React中的受控组件入门教程

标签：

前端工具 React.JS Vue.js

本文详细介绍了React中的受控组件，解释了受控组件的概念及其在表单元素管理中的应用。通过受控组件，表单元素的状态由React的state控制，而非DOM控制，从而实现状态变更的统一管理和维护。文章还提供了多种受控组件的实现示例，包括文本输入框、单选按钮和复选框，并介绍了使用React Hooks简化受控组件的实现方法。

React基础简介

1.1 React简介

React 是由 Facebook 开发并维护的一个用于构建用户界面的JavaScript库。它采用了一种极为独特的虚拟DOM机制，能够大大提高Web应用的性能。React 的核心是组件化思想，通过组件的组合来构建复杂的应用程序。它强调的是声明式编程，即通过描述UI的状态来构建用户界面，而不是通过描述操作来构建用户界面。React 的这种特性使得它在构建大型的、复杂的Web应用时表现出色。

React还具有良好的可维护性、可扩展性以及跨平台的能力，React Native就可以用React来开发原生移动应用。此外，React拥有庞大的社区支持和大量的第三方库，这使得开发者可以高效地构建和维护复杂的Web应用。

1.2 React组件概述

在React应用中，组件是构建用户界面的基本单元。每个组件都是一个独立的、可重用的小块，负责渲染自身以及管理自身的数据。组件可以嵌套使用，即一个组件可以包含其他组件。在React中，组件分为两类：函数组件和类组件。

函数组件：函数组件使用函数定义，接受props作为输入，返回一个React元素。函数组件简单易用，适合构建功能简单的组件。
类组件：类组件使用class关键字定义，继承自React.Component。类组件可以包含状态（state）和生命周期方法，适合构建复杂的、可交互的组件。

React组件的关键在于props和state：

props：属性，从父组件传递给子组件的数据，实现数据的流动。
state：状态，用于存储组件的内部数据，仅用于类组件。

受控组件的概念

2.1 什么是受控组件

在React中，使用受控组件来管理表单元素的状态。受控组件是一种组件模型，其中表单元素的状态不是由DOM来控制，而是由React的state来控制。这样做的好处是，所有的表单元素变更都会通过React的state来管理，使得组件的状态变更统一且易于维护。

受控组件的实现通常涉及以下几个步骤：

在组件的state中定义一个变量来存储表单元素的值。
为表单元素绑定一个事件处理器（如onChange），该处理器在表单元素值发生变化时更新state中的相应变量。
将表单元素的值绑定到这个变量上。

2.2 受控组件的作用与意义

受控组件的主要作用是将非受控表单元素的状态管理从DOM转移到React的state中。通过这种方式，React能够更好地管理和更新表单元素的状态，使得状态变更更加一致和可预测。同时，这也使得我们可以在组件中实现更复杂的逻辑，如表单验证、数据处理等。

受控组件的实现

3.1 创建受控组件的基本步骤

创建一个受控组件的基本步骤如下：

定义状态变量：在组件的state中定义一个变量来存储表单元素的值。
绑定事件处理器：为表单元素绑定一个事件处理器（如onChange），用于在表单元素值变化时更新state中的相应变量。
绑定表单元素值：将表单元素的值绑定到state中的相应变量。

示例代码如下：

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>输入内容: {this.state.value}</p>
      </div>
    );
  }
}

export default ControlledComponent;

在这个示例中，value 是存储输入框值的状态变量，handleChange 方法会在输入框值发生变化时触发，并更新 state 中的 value，最后，输入框的值绑定到 this.state.value。

3.2 使用表单元素实现受控组件

受控组件通常用于处理表单元素，如文本输入框、单选按钮、复选框等。以下是一些常见的表单元素的受控组件实现示例。

3.2.1 文本输入框

文本输入框是最常见的受控组件之一。代码示例如下：

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>当前输入内容: {this.state.value}</p>
      </div>
    );
  }
}

export default TextInput;

在这个示例中，value 变量用于存储输入框的值，当输入框内容发生变化时，handleChange 方法会被触发，更新 state 中的 value 变量。

3.2.2 单选按钮

单选按钮同样可以通过受控组件来实现。代码示例如下：

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <label>
          <input type="radio" value="option1" checked={this.state.selectedValue === 'option1'} onChange={this.handleChange} />
          Option 1
        </label>
        <br />
        <label>
          <input type="radio" value="option2" checked={this.state.selectedValue === 'option2'} onChange={this.handleChange} />
          Option 2
        </label>
        <p>当前选择: {this.state.selectedValue}</p>
      </div>
    );
  }
}

export default RadioInputs;

在这个示例中，selectedValue 变量用于存储单选按钮的选中值。当用户选择某个单选按钮时，handleChange 方法会被触发，更新 state 中的 selectedValue 变量。

3.2.3 复选框

复选框也可以通过受控组件来实现。代码示例如下：

import React, { Component } from 'react';

class CheckBoxInputs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

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

  render() {
    return (
      <div>
        <label>
          <input type="checkbox" checked={this.state.checked} onChange={this.handleChange} />
          Check Me
        </label>
        <p>当前是否选中: {this.state.checked ? '选中' : '未选中'}</p>
      </div>
    );
  }
}

export default CheckBoxInputs;

在这个示例中，checked 变量用于存储复选框的状态。当用户点击复选框时，handleChange 方法会被触发，更新 state 中的 checked 变量。

受控组件的常见用法

4.1 文本输入框的受控组件实现

文本输入框的受控组件实现已经在上面的示例中演示过了。这里再给出一个更复杂的例子，包括输入框的值和状态的双向绑定：

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>当前值: {this.state.value}</p>
        <button onClick={() => this.setState({ value: '' })}>清空输入框</button>
      </div>
    );
  }
}

export default ControlledInput;

在这个示例中，输入框的值与 state 中的 value 变量双向绑定，同时提供一个按钮来清空输入框的值。

4.2 单选按钮和复选框的受控组件实现

单选按钮和复选框的受控组件实现也在上面的示例中演示过了。这里再给出一个更复杂的例子，包括多个复选框的值和状态的双向绑定：

import React, { Component } from 'react';

class CheckBoxes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: [false, false, false]
    };
  }

  handleChange = (index) => (event) => {
    const checked = [...this.state.checked];
    checked[index] = event.target.checked;
    this.setState({ checked });
  }

  render() {
    return (
      <div>
        <label><input type="checkbox" checked={this.state.checked[0]} onChange={this.handleChange(0)} /> Option 1</label>
        <br />
        <label><input type="checkbox" checked={this.state.checked[1]} onChange={this.handleChange(1)} /> Option 2</label>
        <br />
        <label><input type="checkbox" checked={this.state.checked[2]} onChange={this.handleChange(2)} /> Option 3</label>
        <p>当前选中: {this.state.checked.map((checked, index) => (checked ? `Option ${index + 1}` : '')).join(', ')}</p>
      </div>
    );
  }
}

export default CheckBoxes;

在这个示例中，checked 数组用于存储每个复选框的状态，当复选框状态发生变化时，handleChange 方法会被触发，更新 state 中的 checked 数组。

受控组件的高级用法

5.1 处理表单提交

处理表单提交是受控组件的一个重要应用场景。在React中，可以通过受控组件来捕获表单提交事件，并在提交时触发相关的逻辑。

示例代码如下：

import React, { Component } from 'react';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      submitText: 'Submit'
    };
  }

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

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`你输入的内容为: ${this.state.inputValue}`);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            输入内容:
            <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
          </label>
          <button type="submit">{this.state.submitText}</button>
        </form>
      </div>
    );
  }
}

export default Form;

在这个示例中，handleSubmit 方法会在表单提交时触发，阻止表单的默认提交行为，并显示一个包含输入内容的警告框。

5.2 使用React Hooks简化受控组件的实现

React Hooks 是React 16.8版本引入的新特性，它允许在不编写类组件的情况下使用state和其他React特性。使用Hooks可以简化受控组件的实现，代码更简洁且易于维护。

示例代码如下：

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`你输入的内容为: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        输入内容:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default ControlledInput;

在这个示例中，使用 useState Hook 来管理输入框的值，并在 handleChange 和 handleSubmit 中更新和处理输入框的值。

受控组件的常见问题及解决办法

6.1 问题总结

在使用受控组件时，可能会遇到一些常见的问题，例如：

输入框的内容未正确更新。
表单提交时未捕获表单数据。
表单元素的值未正确绑定到状态变量。

这些问题通常可以通过检查代码逻辑以及状态更新机制来解决。

6.2 常见错误及解决方法

6.2.1 输入框的内容未正确更新

如果输入框的内容没有正确更新，可能是因为没有正确地将输入框的值绑定到状态变量，或者在状态更新时未正确使用 setState 方法。

示例代码：

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

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>当前输入内容: {this.state.value}</p>
      </div>
    );
  }
}

这里的代码正确地将 value 绑定到 this.state.value，并且在 handleChange 方法中使用 this.setState 来更新状态变量。

6.2.2 表单提交时未捕获表单数据

如果在表单提交时未捕获表单数据，可能是因为没有正确地处理表单提交事件，或者没有将表单数据绑定到状态变量。

示例代码：

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

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

  handleSubmit = (event) => {
    event.preventDefault(); // 阻止默认提交行为
    alert(`你输入的内容为: ${this.state.inputValue}`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          输入内容:
          <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
        </label>
        <button type="submit">提交</button>
      </form>
    );
  }
}

这里的代码在表单提交时阻止了默认行为，并捕获了输入框中的内容，通过 alert 显示出来。

6.2.3 表单元素的值未正确绑定到状态变量

如果表单元素的值未正确绑定到状态变量，可能是因为状态变量的名称与表单元素绑定的名称不一致，或者在状态更新时未正确更新状态变量。

示例代码：

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

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

  render() {
    return (
      <div>
        <label>
          <input type="radio" value="option1" checked={this.state.selectedValue === 'option1'} onChange={this.handleChange} />
          Option 1
        </label>
        <br />
        <label>
          <input type="radio" value="option2" checked={this.state.selectedValue === 'option2'} onChange={this.handleChange} />
          Option 2
        </label>
        <p>当前选择: {this.state.selectedValue}</p>
      </div>
    );
  }
}

这里的代码通过 this.state.selectedValue 来绑定单选按钮的值，并在 handleChange 方法中正确更新状态变量。

通过以上代码示例，可以更好地理解如何处理和解决在使用受控组件时可能遇到的问题。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕哥6287543

手记
篇

粉丝

2

获赞与收藏

1

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React中的受控组件入门教程

React基础简介

1.1 React简介

1.2 React组件概述

受控组件的概念

2.1 什么是受控组件

2.2 受控组件的作用与意义

受控组件的实现

3.1 创建受控组件的基本步骤

3.2 使用表单元素实现受控组件

3.2.1 文本输入框

3.2.2 单选按钮

3.2.3 复选框

受控组件的常见用法

4.1 文本输入框的受控组件实现

4.2 单选按钮和复选框的受控组件实现

受控组件的高级用法

5.1 处理表单提交

5.2 使用React Hooks简化受控组件的实现

受控组件的常见问题及解决办法

6.1 问题总结

6.2 常见错误及解决方法

6.2.1 输入框的内容未正确更新

6.2.2 表单提交时未捕获表单数据

6.2.3 表单元素的值未正确绑定到状态变量

阅读免费教程