無(wú)論你做什么，都要相信自己可以做到，因?yàn)槟愕臐摿κ菬o(wú)限的。

把父組件的狀態(tài)變成屬性傳遞給子組件，子組件接受這個(gè)屬性，聽(tīng)命于父組件。這個(gè)子組件就是叫做受控組件。在受控與非受控組件有兩種理解方案，第一：狹義上的受控與非受控，就是我們?cè)诒韱沃械氖芸嘏c非受控組件。第二：廣義上的受控與非受控組件，就是 React 組件的數(shù)據(jù)渲染是通過(guò)父組件傳遞過(guò)來(lái)的屬性控制的，能完全控制得住的就是受控組件，不能完全控制住的就是非受控組件。

1. 表單中非受控組件

React 要編寫一個(gè)表單非受控組件，可以使用 ref 來(lái)從 DOM 節(jié)點(diǎn)中獲取表單數(shù)據(jù)（訪問(wèn)節(jié)點(diǎn)，通過(guò)節(jié)點(diǎn)訪問(wèn)值），與狀態(tài)沒(méi)有任何關(guān)系，這種就是非受控組件。 下面代碼使用非受控組件接受一個(gè)表單的值：

import React, { Component } from 'react'

export default class App extends Component {
  myusername = React.createRef()
  render() {
    return (
      <div>
        <h4>登錄頁(yè)</h4>
        {/* 這里設(shè)置 value 后導(dǎo)致 input 不能輸入了。寫成 value 形式本身就是一種受控方式。被字符串 “hubert” 控制住了。*/}
        <input type={"text"} ref={this.myusername} value="hubert"></input>
        {/* 非受控需要通過(guò) defaultValue 設(shè)置默認(rèn)值，只是第一次設(shè)置值 */}
        <input type={"text"} ref={this.myusername} defaultValue="hubert"></input>
        <button onClick={()=>{
          console.log(this.myusername.current.value)
        }}>登錄</button>
        <button onClick={()=>{
          this.myusername.current.value = ""
        }}>重置</button>
      </div>
    )
  }
}

因?yàn)榉鞘芸亟M件將真實(shí)數(shù)據(jù)儲(chǔ)存在 DOM 節(jié)點(diǎn)中，所以在使用非受控組件時(shí)，有時(shí)候反而更容易同時(shí)集成 React 和非 React 代碼。如果你不介意代碼美觀性，并且希望快速編寫代碼，使用非受控組件往往可以減少你的代碼量。否則，你應(yīng)該使用受控組件。

默認(rèn)值問(wèn)題：在React 渲染生命周期時(shí)，表單元素上的 value 將會(huì)覆蓋 DOM 節(jié)點(diǎn)中的值，在非受控組件中，你經(jīng)常希望 React 能賦予組件一個(gè)初始值，但是不去控制后續(xù)的更新。在這種情況下，你可以指定一個(gè) defaultvalue 屬性，而不是 value。

2. 表單中受控組件

現(xiàn)在如果有一個(gè)子組件需要拿到表單中的 value 值，該怎么辦？這里在輸入框值變更的時(shí)候，是不會(huì)同步、分享到子組件的，因?yàn)?render 函數(shù)是不會(huì)重新執(zhí)行的。

在 HTML 中，表單元素（如 <input> 和 <select>）通常自己維護(hù) state，并根據(jù)用戶輸入進(jìn)行更新。而在 React 中，可變狀態(tài)（mutable state）通常保存在組件的 state 屬性中，并且只能通過(guò)使用 setState() 來(lái)更新。我們可以把兩者結(jié)合起來(lái)，使 React 的 state 成為“唯一數(shù)據(jù)源”。渲染表單的 React 組件還控制著用戶輸入過(guò)程中表單發(fā)生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做"受控組件”。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-747478.html

 {/* 在輸入框值變更的時(shí)候，是不會(huì)同步、分享到子組件的 */}
 <Child value={this.myusername.current.value}></Child>

// 設(shè)置成受控組件后后
<Child value={this.state.username}></Child>

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: "hubert"
  }
  render() {
    return (
      <div>
        <h4>登錄頁(yè)</h4>
        {/* 這里設(shè)置 value 后導(dǎo)致 input 不能輸入了。寫成 value 形式本身就是一種受控方式。被字符串 “hubert” 控制住了。*/}
        {/* 非受控需要通過(guò) defaultValue 設(shè)置默認(rèn)值，只是第一次設(shè)置值 */}
        <input type={"text"} ref={this.myusername} value={this.state.username} onChange={(evt)=>{
          this.setState({
            username: evt.target.value
          })
        }}></input>
        <button onClick={()=>{
          console.log(this.state.username)
        }}>登錄</button>
        <button onClick={()=>{
          this.setState({
            username:""
          })
        }}>重置</button>
        {/* 在輸入框值變更的時(shí)候，是不會(huì)同步、分享到子組件的 */}
        {/* <Child value={this.myusername.current.value}></Child> */}
      </div>
    )
  }
}

// 在 react 中 onInput 和 onChange 事件的行為一樣的。原生 JS 則不然。

到了這里，關(guān)于React 受控和非受控組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！