為什么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

總結

以上是生活随笔為你收集整理的React学习（6）—— 高阶应用：非受控组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。