React中的表單元件

表單是前端非常重要的一塊內容，並且往往包含了錯誤校驗等邏輯。

react對表單元素做了專門的優化處理，他對表單元素做了一些抽象，使得他們的使用方式更統一更規範。

表單裡面出來了乙個新的概念叫「約束性元件」。那麼如何理解約束性元件和非約束性元件呢。

約束性元件，簡單的說，就是由react管理了它的value，而非約束性元件的value就是原生的dom管理的。

他們的寫法上也有很大區別。

這個 defaultvalue 其實就是原生dom中的 value 屬性。這樣寫出的來的元件，其value值就是使用者輸入的內容，react完全不管理輸入的過程。

//...省略部分**
handlechange: function(e) );
}

這裡，value屬性不再是乙個寫死的值，他是 this.state.name，而 this.state.name 是由 this.handlechange 負責管理的。

這個時候實際上 input 的 value 根本不是使用者輸入的內容。而是onchange 事件觸發之後，由於 this.setstate 導致了一次重新渲染。不過react會優化這個渲染過程，實際它依然是通過設定input的value來實現的。

但是一定要注意，約束性元件顯示的值和使用者輸入的值雖然很多時候是相同的，但他們根本是兩碼事。約束性元件顯示的是 this.state.name 的值。你可以在handlechange中對使用者輸入的值做任意的處理，比如你可以做錯誤校驗。

非約束性元件：使用者輸入a -> input 中顯示a

約束性元件：使用者輸入a -> 觸發onchange事件 -> handlechange 中設定 state.name = 「a」 -> 渲染input使他的value變成a

正式因為這樣，強烈推薦使用約束性元件，因為它能更好的控制項的生命流程。

react 把 input,textarea 和 select 三個元件做了抽象和封裝，他們的用法變得非常統一，你基本上可以當做同乙個元件來用。

他們現在有統一的 value 屬性和 onchange 事件，現在對於這三種元件你都可以這樣寫

不過 chekbox有和上面三個不一樣，因為checkbox改變的不是 value ，而是 checked 狀態。

你可以這樣寫：

下面是乙個包含了 input,textarea, select, radio 的表單，並且做了簡單的校驗：

var myform = react.createclass(;
},handleemail: function(e) ~-]+@[a-za-z0-9](?:[a-za-z0-9-][a-za-z0-9])?(?:\.[a-za-z0-9](?:[a-za-z0-9-][a-za-z0-9])?)*$/.test(value))) 
this.setstate();
},handleintro: function(e) 
this.setstate();
},handlecity: function(e) );
},handlegender: function(e) );
},render: function() 
intro:
所在城市:
杭州北京
上海 
性別: )
}});
react.render(
,document.getelementbyid("div1")
);

React中的表單元件

構建 react 中可重用靈活的表單元件

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

React表單應用不可控元件

React中的表單元件

構建 react 中可重用靈活的表單元件

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

React表單應用 不可控元件

相關推薦

React表單應用不可控元件