React学习(6)—— 高阶应用:非受控组件
非受控组件使用非受控组件在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有Dom自己控制。 非受控组件实现的重点是用Refs特性获取真实Dom来代替每次数据变更去更新组件的状态值。 例如下面的代码,在非受控组件中记录被用户输入的名字: 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设定一个默认初始值但是不再控制后续更新。基于这个案例,你可以指定一个 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"”就是指定了一个默认值。同样地, (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ruby-on-rails – Rails 3.2.1,资产在部署时预编译了两次?
- c – Downcasting double to float:是否有溢出行为保证?
- Nand Flash与Nor Flash
- c – 指向模板类的指针作为该类参数
- meteor – React SSR – 处理window.height / width
- React-Native Android,仅适用于armeabi架构
- c# – 如何使用注释从类的属性值派生xml元素名称?
- C# 6.0的属性(Property)的语法与初始值详解
- ruby-on-rails – 如何在不创建空模型的情况下创建rails_ad
- 测试向前&&质量向前