react受控组件和非受控组件

最新推荐文章于 2024-08-03 09:28:46 发布

微光时空

最新推荐文章于 2024-08-03 09:28:46 发布

阅读量274

点赞数

分类专栏： react 文章标签： react受控组件 react非受控组件附带评论小案例

本文链接：https://blog.youkuaiyun.com/M106588L/article/details/100655544

版权

本文详细介绍了React的受控组件和非受控组件的概念、使用场景及注意事项。受控组件的值由React控制，适用于需要动态更新的情况。非受控组件则由DOM处理表单数据，适合不需要频繁更改value的情况。文中还提供了一个评论小案例，帮助理解子父组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个评论小案例就是总结了受控组件的意思，还有react子父传参的例子哦,忘记受控组建的小伙伴们可以看看啊

受控的操作顺序

其值由React控制的输入表单元素称为“受控组件”。
受控的操作顺序
在state里面设置状态
在表单元素上设置value={状态}
在元素上添加onChange是事件
在事件里面修改状态

什么时候使用受控组件？

需要对组件的value值进行修改时，使用受控组件。比如：页面中有一个按钮，每点击一次按钮受控组件的值加1

注意点

在受控组件中,如果没有给输入框绑定onChange事件,将会受到react的警告
并且此时输入框除了默认值，是无法输入其他任何参数的

受控表单

   input 表单受控
   type ：      text         value   
   type：      checkbox      checked
   type :       radio       checked
   textarea     select

App.js

import React, {
    Component } from 'react'
import Top from "./top"
import Comment from "./comment"

import "./style.css"
class App extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            list:[],
        };
    }
    render() {
   
        let {
   list}=this.state;
        return <div className="wrapper">
            <Top add={
   (obj) => {
   
                console.log(obj,"top")
                this.setState({
   
                    list:[...list,obj]
                },()=>{
   
                    console.log(this.state.list)
                })
            }} />

  
            <Comment list={
   this.state.list} />
        </div>
    }
}

export default App;

top.js

import React, {
    Component } from 'react'
class Top extends Component {

最低0.47元/天解锁文章