React学习（6）—— 高阶应用：非受控组件

为什么80%的码农都做不了架构师？>>>

非受控组件

使用非受控组件

在大部分情况下，推荐使用受控组件来实现表单、输入框等状态控制。在受控组件中，表单等数据都有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设定一个默认初始值但是不再控制后续更新。基于这个案例，你可以指定一个defaultValue 属性来代替 value。

render() {return (<form onSubmit={this.handleSubmit}><label>Name:<inputdefaultValue="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

转载于:https://my.oschina.net/chkui/blog/874409