一、認識受控組件

在React中，HTML表單的處理方式和普通的DOM元素不太一樣：表單元素通常會保存在一些內部的state。

比如下面的HTML表單元素：

• 這個處理方式是DOM默認處理HTML表單的行為，在用戶點擊提交時會提交到某個服務器中，并且刷新頁面；
• 在React中，并沒有禁止這個行為，它依然是有效的；
• 但是通常情況下會使用JavaScript函數來方便的處理表單提交，同時還可以訪問用戶填寫的表單數據；
• 實現這種效果的標準方式是使用“受控組件”；

二、受控組件練習

HTML 中，表單元素（如<input>、 <textarea> 和 <select>）之類的表單元素通常自己維護 state，并根據用戶輸入進行更新。

而在 React 中，可變狀態（mutable state）通常保存在組件的 state 屬性中，并且只能通過使用 setState()來更新。

• 我們將兩者結合起來，使React的state成為“唯一數據源”；
• 渲染表單的 React 組件還控制著用戶輸入過程中表單發生的操作；
• 被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”；
  

由于在表單元素上設置了 value 屬性，因此顯示的值將始終為this.state.value，這使得 React 的 state 成為唯一數據源。

由于 handleUsernameChange 在每次按鍵時都會執行并更新 React 的 state，因此顯示的值將隨著用戶輸入而更新。

三、受控組件的其他練習

textarea標簽

• texteare標簽和input比較相似：

select標簽

• select標簽的使用也非常簡單，只是它不需要通過selected屬性來控制哪一個被選中，它可以匹配state的value來選中。
  
  

處理多個輸入

• 多處理方式可以像單處理方式那樣進行操作，但是需要多個監聽方法：
  

import React, { PureComponent } from "react"; import PropTypes from "prop-types";class App extends PureComponent {constructor(props) {super(props);this.state = {username: "",password: "",validCode: "",};}render() {return (<div><form onSubmit={(e) => this.handleSubmit(e)}><div><label htmlFor="username">用戶：{/* 受控組件 */}<inputtype="text"id="username"onChange={(e) => this.handleUsernameChange(e)}value={this.state.username}/></label></div><div><label htmlFor="password">密碼：{/* 受控組件 */}<inputtype="text"id="password"onChange={(e) => this.handlePasswordChange(e)}value={this.state.password}/></label></div><div><label htmlFor="validCode">驗證碼：{/* 受控組件 */}<inputtype="text"id="validCode"onChange={(e) => this.handleValidCodeChange(e)}value={this.state.validCode}/></label></div><input type="submit" value="提交" /></form></div>);}handleSubmit(e) {e.preventDefault();const { username, password, validCode } = this.state;console.log(username, password, validCode);}handleUsernameChange(e) {console.log(e.target.value);this.setState({username: e.target.value,});}handlePasswordChange(e) {console.log(e.target.value);this.setState({password: e.target.value,});}handleValidCodeChange(e) {console.log(e.target.value);this.setState({validCode: e.target.value,});} }App.propTypes = {};export default App;

• 這里我們可以使用ES6的一個語法：計算屬性名（Computed property names）
  

import React, { PureComponent } from "react"; import PropTypes from "prop-types";class App extends PureComponent {constructor(props) {super(props);this.state = {username: "",password: "",validCode: "",};}render() {return (<div><form onSubmit={(e) => this.handleSubmit(e)}><div><label htmlFor="username">用戶：{/* 受控組件 */}<inputtype="text"name="username"id="username"onChange={(e) => this.handleChange(e)}value={this.state.username}/></label></div><div><label htmlFor="password">密碼：{/* 受控組件 */}<inputtype="text"name="password"id="password"onChange={(e) => this.handleChange(e)}value={this.state.password}/></label></div><div><label htmlFor="validCode">驗證碼：{/* 受控組件 */}<inputtype="text"name="validCode"id="validCode"onChange={(e) => this.handleChange(e)}value={this.state.validCode}/></label></div><input type="submit" value="提交" /></form></div>);}handleSubmit(e) {e.preventDefault();const { username, password, validCode } = this.state;console.log(username, password, validCode);}handleChange(e) {console.log(e.target.name);this.setState({[e.target.name]: e.target.value})}/* handleUsernameChange(e) {console.log(e.target.value);this.setState({username: e.target.value,});}handlePasswordChange(e) {console.log(e.target.value);this.setState({password: e.target.value,});}handleValidCodeChange(e) {console.log(e.target.value);this.setState({validCode: e.target.value,});} */ }App.propTypes = {};export default App;

四、非受控組件

React推薦大多數情況下使用 受控組件 來處理表單數據：

• 一個受控組件中，表單數據是由 React 組件來管理的；
• 另一種替代方案是使用非受控組件，這時表單數據將交由 DOM 節點來處理；

如果要使用非受控組件中的數據，那么我們需要使用 ref 來從DOM節點中獲取表單數據。
我們來進行一個簡單的演練：

• 使用ref來獲取input元素；
  

在非受控組件中通常使用defaultValue來設置默認值；

同樣，<input type="checkbox"> 和 <input type="radio">支持 defaultChecked，<select> 和 <textarea>支 持 defaultValue。

總結

以上是生活随笔為你收集整理的React中的受控组件和非受控组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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