04 表單元素的受控元件和非受控元件

表單元素的value值完全來只與state，這個元件就是受控元件，否則就是非受控元件

受控元件：在html中，表單元素通常自己維護state，並根據使用者輸入進行更新。而在react中，可變狀態通常儲存在元件的state屬性中，並且只能通過setstate()來更新

我們可以把兩者結合起來，使得react得state成為「唯一資料來源」。渲染表單的react元件還控制著使用者輸入過程中表單發生的操作。被react以這種方式控制取值的表單輸入元素就叫做"受控元件"

}render())}} />)}

}

非受控元件：這時表單資料交由dom節點來控制

要編寫乙個非受控元件，而不是為每乙個狀態都編寫資料處理函式，你可以使用ref來從dom節點獲取表單資料

handlesubmit = e=>

render()

}react提供的這個ref屬性，表示為對元件真正例項的引用，其實就是reactdom.render()返回的元件例項。ref可以掛載到元件上也可以是dom元素上。

在react 最新的版本中，要使用ref, 需要使用react.createref方法先生成乙個ref。

import react,  from 'react'

import reactdom from 'react-dom'
constructor() 
componentdidmount () 
render () )}}
reactdom.render(
document.getelementbyid('root')
)

import react,

from
'react'
import reactdom from
'react-dom'
class
extends
component
render()
"text" ref=}/
>
<
/div>)}
}reactdom.
render
(>
,  document.
getelementbyid
('root'
))

函式式元件內部無this/無生命週期鉤子函式

function()

/>
}>focus<
/button>
<
/div>)}
reactdom.
render
(>
,document.
getelementbyid
("box"
))

react 表單（受控元件和非受控元件）

我們知道表單元素與其他的普通dom元素來說是不一樣的，它們儲存了自己的一些狀態。我們主要說的就是表單元素中的受控元件和非受控元件。受控元件就是這個元件的狀態是我們 react 控制的，這個元件的行為是完全受到我們控制的，所以叫做受控元件，比如 1 class nameform extends rea...

React 之受控元件和非受控元件

在react中，所謂受控元件和非受控元件，是針對表單而言的。表單受控元件class control extends react.component e為原生的事件繫結物件 handlechange e render 使用者名稱 username type text value onchange 密碼...

靈活使用受控元件和非受控元件

收集表單資料 import react,from react export default class inputone extends component this handlesubmit this handlesubmit.bind this this handlechange this ha...