我們都知道，有許多的web組件可以被用戶的交互發生改變，比如：<input>，<select>，或者是我現在正在使用的富文本編輯器。這些組件在日常的開發中很不顯眼，我們可以很輕易的通過輸入一些內容或者設置元素的value屬性來改變組件的值。但是，因為React是單向數據流綁定的，這些組件可能會變得失控：

1.一個維護它自己state里的value值的<Input>組件無法從外部被修改；

2.一個通過props來設置value值的<Input>組件只能通過外部控制來更新。

最近在使用螞蟻金服出品的一條基于react的ant-design UI組件時遇到一個問題，編輯頁面時input輸入框會展示保存前的數據，但是是用defaultValue就是不起作用，輸入框始終為空值而不是具體的傳入的值。具體編輯頁面中文本框相關的代碼如下：

    ... //render方法上面的內容省略 <FormItem   label="問題描述："   hasFeedback   {...props.formItemLayout} >  <Input type="textarea" defaultValue={props.value}/></FormItem>      //render下面的內容省略      ...

在給代碼段所屬的組件傳遞value props后，文本框中的默認值一直為空，因為該頁面所在的狀態state中，value所對應的狀態初始值為空，導致后續異步請求成功后改變value對應的狀態中的值，仍然顯示為空。

google一下具體原因，原來React的form表單組件中的defaultValue一經傳遞值后，后續改變defaultValue都將不起作用，被忽略了。

具體來說這是一種react非受控組件，其狀態是在input的react內部控制，不受調用者控制。可以使用受控組件來實現。

下面就說說這個受控組件與非受控組件，它們都是基于react的form表單組件元素的，具體也可參考react官網這方面介紹

受控組件

就形式上來說，受控組件就是為某個form表單組件添加value屬性；非受控組件就是沒有添加value屬性的組件；，受控組件的形式如下形式：

render: function() {  return <input type="text" value="Hello!" />; }

添加了value 屬性的表單組件元素其內部是不會維護自己狀態state，組件的value值一旦設置某個具體值就始終是這個值，所以需要調用者來控制組件value的改變。

這種寫法帶來一個問題：渲染后的input組件的用戶交互，用戶輸入的任何值將不起作用，input輸入框中的值始終為Hello!。這與HTML中input表現不一致。

為此，為了控制該組件，就需要能能夠控制input組件的值，需要借助其內部的狀態state，即組件內部要維護一個狀態state以便配合input組件的onChange和setState方法來完成對組件的控制；例如對上面形式可以進行封裝一個inputItem組件，其內部維護一個state狀態，具體代碼如下：