×
  • Web前端首页
  • React
  • React基础知识:约束性组件( controlled component)与非约束性组件( uncontrolled component)有什么区别?

React基础知识:约束性组件( controlled component)与非约束性组件( uncontrolled component)有什么区别?

作者:abc1232022.10.19来源:Web前端之家浏览:5097评论:0
关键词:React

今天我们聊聊一个React基础知识:约束性组件( controlled component)与非约束性组件( uncontrolled  component),以及他们有什么区别呢?

在 React中,组件负责控制和管理自己的状态。

如果将HTML中的表单元素( input、 select、 textarea等)添加到组件中,当用户与表单发生交互时,就涉及表单数据存储问题。根据表单数据的存储位置,将组件分成约東性组件和非约東性组件。

约束性组件( controlled component)就是由 React控制的组件,也就是说,表单元素的数据存储在组件内部的状态中,表单到底呈现什么由组件决定。

如下所示, username没有存储在DOM元素内,而是存储在组件的状态中。每次要更新 username时,就要调用 setState更新状态;每次要获取 username的值,就要获取组件状态值。

class App extends Component {
    //初始化状态
    constructor ( props ) {
        super ( props )
        this .state = {
         username:'有课前端网'
        }
    }
    //查看结果
    showResult ( ) {
        //获取数据就是获取状态值
        console. log ( this .state. username )
    }
    changeUsername (e) {
        //原生方法获取
        var value =e .target .value
        //更新前,可以进行脏值检测
        //更新状态
        this .setState ( {
            username:value
        } )
    }
    //渲染组件
    render( ) {
        //返回虚拟DOM 
        return (
        <div>
        <p>
        {/*输入框绑定va1ue*/}
        <input type="text" onChange={ this.changeUsername .bind (this ) }
        value= { this .state.username }/>
        </p>
        <p>
        < button onClick={this.showResult.bind (this)}>查看结果</ button>
        </p>
        </div>
        )
    }
}

非约束性组件( uncontrolled component)就是指表单元素的数据交由元素自身存储并处理,而不是通过 React组件。表单如何呈现由表单元素自身决定。

如下所示,表单的值并没有存储在组件的状态中,而是存储在表单元素中,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它的值。当要获取表单数据时,要首先获取表单元素,然后通过表单元素获取元素的值。

注意:为了方便在组件中获取表单元素,通常为元素设置ref属性,在组件内部通过refs属性获取对应的DOM元素。

class App extends Component {
//查看结果
showResult ( ) {
//获取值
console. log(this. refs. username .value)
//修改值,就是修改元素自身的值
this.refs.username.value="专业前端学习平台"
//渲染组件
render ( ) {
//返回虚拟DOM 
return (
<div>
<p>
{/*非约束性组件中,表单元素通过 defaultvalue定义*/}
< input type="text"  ref=" username"  defaultvalue="有课前端网"/>
</p>
<p>
< button onClick={this. showResult.bind ( this ) }>查看结果</button>
</p>
</div>
 )
  }
}

虽然非约東性组件通常更容易实现,可以通过refs直接获取DOM元素,并获取其值,但是 React建议使用约束性组件。主要原因是,约東性组件支持即时字段验证,允许有条件地禁用/启用按钮,强制输入格式等。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/react20221019a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: