受控组件与⾮受控组件的选⽤标准

最新推荐文章于 2024-10-04 17:00:22 发布

Jacko-Lam

最新推荐文章于 2024-10-04 17:00:22 发布

阅读量67

点赞数

分类专栏： react及其相关技术文章标签： react.js es6 javascript 前端 html

本文链接：https://blog.csdn.net/qq_40705944/article/details/120840211

版权

react及其相关技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了React中受控组件和非受控组件的概念及区别。非受控组件的数据由DOM节点管理，适用于简单表单场景；受控组件的数据由state管理，能实时获取并验证数据，适用于需要复杂交互的表单。在选择使用哪种组件时，应根据实际需求来决定。推荐在大多数情况下使用受控组件，以确保更好的数据管理和交互体验。

摘要由CSDN通过智能技术生成

非受控组件

表单数据交由DOM节点管理，特点是表单数据在需要时进⾏获取，代码实现相对简单。

示例代码：

import React, { useRef } from "react"

function App(){
    const username = useRef()
    const handleSubmit = event => {
      event.preventDefault()
      // 需要时获取数据
      console.log(username.current.value)
    }
    return (
        <form onSubmit={handleSubmit}>
          <input type="text" ref={username} />
          <input type="submit" />
        </form>
    )
}

export default App

受控组件

表单数据交由state对象管理，特点是可以实时得到表单数据，代码相对复杂。

import React, { useState } from "react"

function App(){
    const [username, setUsername] = useState('')
    const handleSubmit = event => {
      event.preventDefault()
      console.log(username)
    }
    const handleChange = event => {
      // 同步到状态
      setUsername(event.target.value)
    }
    return (
        <form onSubmit={handleSubmit}>
          <input type="text" value={username} onChange={handleChange} />
          <input type="submit" />
        </form>
    )
}

export default App

选用标准

受控组件和⾮受控组件都有其特点，应该根据需求场进⾏选择；

在⼤多数情况下，推荐使⽤受控组件处理表单数据；

如果表单在数据交互⽅⾯⽐简单，使⽤⾮受控表单，否则使⽤受控表单；

场景	⾮受控	受控
表单提交时取值	√	√
表单提交时验证	√	√
表单项元素实时验证	×	√
根据条件禁⽤提交按钮	×	√
强制输⼊内容的格式	×	√
⼀个数据的多个输⼊	×	√