React中的表單處理

React的表單算是React的一個坑了，由於React在瀏覽器顯示的是虛擬的DOM，我們在表單輸入值后直接提交，是無法獲取到這個值的。對此，官方給出的解決辦法是：先把輸入的值存放在組件的狀態（state）中，之后通過狀態的改變更新頁面內容，從而顯示出正確的值，用戶提交的也是從state里獲取的表單的value。參考網址：http://www.css88.com/react/docs/forms.html

class Tab extends React.Component{
　　constructor(props) {
　　　　super(props);
　　　　this.state = {value: ''};
　　}

　　handleChange(event) {
　　　　this.setState({value: event.target.value}); //用戶輸入值是改變狀態里面存放的值
　　}

　　handleSubmit(event) {
　　　　event.preventDefault(); //阻止表單默認提交
　　　　if (!this.state.value) {
　　　　　　alert('提交內容不能為空！');
　　　　　　return;
　　　　};
　　　　alert('Submit text is ' + this.state.value); //這里可以寫入ajax代碼

　　}

　　render() {
　　　　return <form action="#" method='post' onSubmit={this.handleSubmit.bind(this)}>
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>
　　　　　　　　　　　　　　<input type='text' value={this.state.value} onChange={this.handleChange.bind(this)}/>
　　　　　　　　　　　　</li>
　　　　　　　　　　　　<li>
　　　　　　　　　　　　　　<input type='submit'/>
　　　　　　　　　　　　</li>
　　　　　　　　　　</ul>
　　　　　　　　</form>
　　}
};

ReactDOM.render(
　　<Tab />,
　　document.getElementById('main')
);