前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >React学习(6)—— 高阶应用:非受控组件

React学习(6)—— 高阶应用:非受控组件

作者头像
随风溜达的向日葵
发布于 2018-08-15 03:44:55
发布于 2018-08-15 03:44:55
64400
代码可运行
举报
文章被收录于专栏:技术墨客技术墨客
运行总次数:0
代码可运行

非受控组件

使用非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有Dom自己控制。

非受控组件实现的重点是用Refs特性获取真实Dom来代替每次数据变更去更新组件的状态值。

例如下面的代码,在非受控组件中记录被用户输入的名字:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    //在提交时,直接使用ref获取的真实Dom获取值
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

尝试代码

由于在非受控组件中使用Refs特性获取了真实Dom的实例,所以在使用非受控组建时,更容易集成React和非React代码,在某些时候也可以省略一些代码。但是建议除了特殊情况,都使用受控组件。

如果想要深入理解什么情况下使用哪种组件,建议阅读 受控和不受控表单输入 一文。

组件默认值

在React渲染的生命周期,表单中的value属性会被覆盖Dom中的value值。在使用非受控组件时,通常需要React设定一个默认初始值但是不再控制后续更新。基于这个案例,你可以指定一个defaultValue 属性来代替 value

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

例如中“defaultValue = "Bob"”就是指定了一个默认值。同样地, <input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked属性, <select> 标签支持 defaultValue属性。

原文地址:https://www.chkui.com/article/react/react_uncontroller_components

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/04/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React受控与非受控组件
表单项的元素 input/textarea/select 等 需要维护自己的state,并根据用户输入进行更新。 可变状态通常保存在组件的state中,只能通过setState()进行更新。
epoos
2022/06/06
5200
React受控组件和非受控组件
在HTML中,表单元素的标签<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。 在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 进行更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为受控组件。 比如,给表单元素input绑定一个onChange事件,当input状态发生变化时就会触发onChange事件,从而更新组件的state。
愤怒的小鸟
2021/01/11
3.7K0
受控组件表单&不受控组件
表单里面的数据 根据State确定 在 HTML 中,表单元素如 <input>,<textarea> 和 <select>表单元素通常保持自己的状态,并根据用户输入进行更新。而在 React 中,可变状态一般保存在组件的 state(状态) 属性中,并且只能通过 setState()更新。
河湾欢儿
2018/09/06
2.2K0
React篇(043)-什么是非受控组件?
非受控组件是在内部存储其自身状态的组件,当需要时,可以使用 ref 查询 DOM 并查找其当前值。这有点像传统的 HTML。
齐丶先丶森
2022/05/12
3560
React的受控组件用法详解!
用state来获取和设置输入元素值的组件,称之为受控组件。<input type="text">, <textarea> 和 <select> 等标签都可用 value 属性,来实现受控组件。
Learn-anything.cn
2021/11/28
6330
React 实战
只需要保证,在同一个数组中的兄弟元素之间的 key 是唯一的。而不需要在整个应用程序甚至单个组件中保持唯一。
王秀龙
2021/08/26
1.2K0
React 实战
20道高频React面试题(附答案)
Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中,props 是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染它。凡事有例外,某些情况下咱们需要在典型数据流外,强制修改子代,这个时候可以使用 Refs。
goClient1992
2022/07/27
1.8K0
一文读透react精髓
学和使用react有一年多了,最近想在梳理一下react基础知识,夯实基础,激流勇进~
xiaofeng123aa
2022/09/25
2.8K0
一小时入门React
注意:在点击事件中,不要直接调用函数,如果需要传递参数,使用箭头函数,jsx中所有dom事件必须用驼峰命名。如下:
乐圣
2022/11/19
9890
一小时入门React
35 道咱们必须要清楚的 React 面试题
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。
前端小智@大迁世界
2019/11/07
2.6K0
2021前端react面试题汇总
(2)区别 Redux更多的是遵循Flux模式的一种实现,是一个 JavaScript库,它关注点主要是以下几方面∶
zz1998
2021/09/24
2.3K0
React学习笔记(三)—— 组件高级
下面了的代码,我们用到了数组函数的map方法来实现数组的每一个值变成它的2倍,同时返回一个新数组,最后打印出了这个数组:
张果
2023/03/11
8.3K0
React学习笔记(三)—— 组件高级
React 状态、事件与动态渲染
例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。
随风溜达的向日葵
2018/07/31
1.4K0
React面试题精选
实际上, 想要去了解某人对React的理解程度,仅凭这些面试题或许远远不够。 react面试题 这篇文章更应该取名为关于react你不是非知不可的东西,但如果了解了的话总是有好处的。
疯狂的技术宅
2019/03/27
2.8K0
React面试八股文(第一期)
在React项目中,通过redux存储全局数据时,会有一个问题,如果用户刷新了网页,那么通过redux存储的全局数据就会被全部清空,比如登录信息等。这时就会有全局数据持久化存储的需求。首先想到的就是localStorage,localStorage是没有时间限制的数据存储,可以通过它来实现数据的持久化存储。
beifeng1996
2022/10/18
3.2K0
React非受控组件
在React中,组件的状态(state)通常由组件自身管理和控制。然而,有时我们也可以使用非受控组件来处理表单元素或其他用户输入,这意味着我们不需要显式地管理和更新组件的状态。
堕落飞鸟
2023/05/19
6940
测开技能--Web开发 React 学习(十)表单
列表 & Key function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number}>{number}</li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <Num
雷子
2021/03/15
3950
测开技能--Web开发 React 学习(十)表单
2021前端react高频面试题汇总
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时,它将渲染其内容,当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
zz1998
2021/09/27
5.4K0
前端一面常考react面试题
相同点: 组件是 React 可复用的最小代码片段,它们会返回要在页面中渲染的 React 元素。也正因为组件是 React 的最小编码单位,所以无论是函数组件还是类组件,在使用方式和最终呈现效果上都是完全一致的。
beifeng1996
2023/01/05
1.2K0
React——受控组件和非受控组件【八】
思索
2024/08/16
1000
React——受控组件和非受控组件【八】
相关推荐
React受控与非受控组件
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文