良许Linux教程网 干货合集 讲解一下受控和非受控表单

讲解一下受控和非受控表单

规范化的方式依然是借助 ref 来实现,只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的,在获取时,直接调用生成的 ref 就可以了。

受控和非受控表单受控和非受控表单

常用的受控表单示例

受控的下拉列表

import React, { Component } from 'react'

export class Tables extends Component {

 state = {
   subject: "HTML"
 }

 render() {
   return (
     
       

{this.state.subject}

             
   )  } } export default Tables

受控单选框

import React, { Component } from 'react'

export class Tables extends Component {

 state = {
   sex: "男"
 }

 render() {
   return (
     
       

{this.state.sex}

       type="radio" name="sex" id="" value="男"          onChange={            (ev) => this.setState({ sex: ev.target.value })          } /> 男        type="radio" name="sex" id="" value="女"          onChange={            (ev) => this.setState({ sex: ev.target.value })          } /> 女        type="radio" name="sex" id="" value="妖"          onChange={            (ev) => this.setState({ sex: ev.target.value })          } /> 妖      
   )  } } export default Tables

受控复选框

import React, { Component } from 'react'

export class Tables extends Component {

 // 模拟数据源
 Datas = [
   {id:1,title:'HTML',isChecked:false},
   {id:2,title:'JS',isChecked:true},
   {id:3,title:'CSS',isChecked:false},
 ]

 checks = (index,ev)=>{
   // console.log(ev.target.checked)
   // console.log(index)

   this.Datas[index].isChecked = ev.target.checked
 }

 render() {
   return (
     
       

复选框

       {          this.Datas.map((data,index)=>{            return (                          )          })        }              
   )  } } export default Tables

非受控表单

在大多数情况下,我们推荐使用 受控表单 来处理表单数据。

在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控表单,这时表单数据将交由 DOM 节点来处理。

受控表单需要为每个状态更新都编写数据处理函数,而使用非受控表单,你可以使用 ref 来从 DOM 节点中获取表单数据。

import React, { Component } from 'react'

export class Tables extends Component {


 gets = ()=>{
   console.log(this.refs.users.value)
 }

 render() {
   return (
     
       type="text" ref='users'/>              
   )  } } export default Tables

但是,这样的用法会在浏览器中看到一个警告型的报错信息,原因也很简单,在新版的 React 中,默认启用了严格模式。

Warning: A string ref, "users", has been found within a strict mode tree.

我们需要在入口的 index.js 中,将严格模式的代码删除,如下:

ReactDOM.render(

  ,
document.getElementById('root')
);

改完之后就是这个鬼样子了,错误提示就消失了:

ReactDOM.render(
   ,
 document.getElementById('root')
);

规范化写法

但是,这样的方式并不好,别问为什么,就是不好,我们建议使用下面的方式:

import React, { Component } from 'react'

export class Tables extends Component {
 constructor (){
   super()
   this.myref = React.createRef()
 }

 gets = ()=>{
   console.log(this.myref.current.value)
 }

 render() {
   return (
     
       type="text" ref={this.myref} />              
   )  } } export default Tables

规范化的方式依然是借助 ref 来实现,只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的,在获取时,直接调用生成的 ref 就可以了。

但是,需要注意,不论哪种方式,知道就行了,非受控表单,能不用就不要用,为啥啊?不受控制的东西,你也敢往家里领?

又但是,正因为非受控表单将真实数据储存在 DOM 节点中,所以在使用非受控表单时,有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。

总结

在应用页面中,与用户交互的基本都是在表单中呈现的。根据 React 框架的设计理念,对于表单的渲染工作,肯定由框架负责的,而表单数据的交互必然需要收到框架的控制和依赖,受控表单才是我们最应该使用的表单方式,但是非受控表单明显代码更多,非受控表单是为了在特殊情况下获取 Dom 而存在的,官方也不建议使用,即便非受控表单看起来更好用。

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部