按照官方文件和例程部落格，實現了乙個簡單的輸入框元件。
總結一下，乙個簡單的react.js應用應按照以下步驟構建：
設計元件原型和json api； 拆分使用者介面為乙個元件樹； 利用react， 建立應用的乙個靜態版本； 識別出最小的（但是完整的）代表ui的state； 確認state的生命週期； 新增反向資料流。
個人認為這裡的難點在於如何拆分使用者介面，粒度過大不利於元件化的重用，粒度過小的話，顯得冗餘過多，並且複雜度陡公升。本人最開始嘗試細化的拆分，盡量讓乙個元件只完成乙個很小的功能需求，但最後反而不知道如何給每個元件分配其任務。
另乙個難點**於對state的判斷，其實如果能夠識別出最小的state，讀者會發現乙個複雜的元件所需的state數量其實很少。
在react.js中，有兩種資料模型，state代表的是會動態變化的狀態，props代表的是父級傳遞而來的屬性，state會反過來更新ui，而props只是一次性設定填充。
我們的元件要完成以下功能：
可以定製label和輸入框的placeholder的內容 可以有個屬性設定個正則，輸入的文字不符合正則的時候輸入框就標紅 右側的大叉icon點選後，消失並清楚輸入框內容 元件需要開放3個對外方法，獲取（獲取值時trim），設定（設定值時trim），刪除，輸入框的內容。
原型比較簡單，樣式如下：
json介面資料如下：$/}
我們通過json資料設定輸入框元件的label標籤、input的placeholder屬性和對使用者輸入的正則驗證。
在完成使用者介面切分的過程中，最開始，如圖原型圖所示，做了非常細粒度的拆分，拆分結構如下：
limitedinputbox
title inputbox clearbutton
這裡，將limitedinputbox作為最外面的容器，包裹整個元件，子元件分為三部分，title即是乙個label標籤，用來顯示該輸入框元件的名稱（或者說標題），inputbox即是乙個input標籤，用來接收使用者輸入，clearbutton可以用乙個img標籤，用來清除input輸入框內容。剛開始準備用另外乙個容器包裹inputbox和clearbutton，發現這樣過於冗餘於是兩者還是和title作為同一級元件比較好。
後來思來，覺得過於拆分了，最小單位與html原生標籤同一級別，沒有意義，因此，最後只保留了乙個元件，就稱之為limitedinputbox。即：
limitedinputbox
首先，不需要考慮使用者互動，直接將資料模型渲染到ui上。即將資料渲染和使用者互動兩個過程拆分開來。
這樣做比較簡單，因為構建靜態版本的頁面只需要大量的輸入，而不需要思考；但是新增互動功能卻需要大量的思考和少量的輸入。
為了建立乙個渲染資料模型的應用的靜態版本，你將會構造一些元件，這些元件重用其它元件，並且通過 props 傳遞資料。 props 是一種從父級向子級傳遞資料的方式。
本例中，的props就是第一步構建的json資料。
考慮到第二步中我採取了兩種拆分方式，這裡給出相應的**：
/** author : river he**/
//細分結構
var data = $/
};var title = react.creatclass(
);}});
var inputbox = react.createclass(
});var clearbutton = react.createclass(
});var limitedinputbox = react.createclass($/
};var limitedinputbox = react.createclass(
); } }); reactdom.render( , document.getelementbyid('example') );為了使 ui 可互動，需要能夠觸發底層資料模型的變化。 react 通過 state 使這變得簡單。
為了正確構建應用，首先需要考慮應用需要的最小的可變 state 資料模型集合。此處關鍵點在於精簡：不要儲存重複的資料。構造出絕對最小的滿足應用需要的最小 state 是有必要的，並且計算出其它強烈需要的東西。
本案例較簡單，state很明顯是inputtext，即input輸入框中的值。
而對於一般情況，可以簡單地對每一項資料提出三個問題：
是否是從父級通過props傳入的？如果是，可能不是state。 是否會隨著時間改變？如果不是，可能不是state。 能夠根據元件中其他的state資料或者props計算出來嗎？如果是，就不是state。
找出了state之後，需要繼續找出那些元件會被state更新，即哪些元件應該擁有state資料模型，本案例同樣很簡單，因為輸入框input要判斷使用者輸入是否符合正規表示式要求，因此與input相關的元件都應該擁有state。按照第一種細分，inputbox元件應該擁有state，按照第二個細分，因為只存在乙個元件limitedinputbox，故其應該擁有state。
//細分結構
var data = $/
};var title = react.creatclass(
);}});
var inputbox = react.createclass(
});var clearbutton = react.createclass(
});var limitedinputbox = react.createclass(;
},render: function() $/
};var limitedinputbox = react.createclass(;
},render: function()
); } }); reactdom.render( , document.getelementbyid('example') );前面構建了渲染正確的基於props和state的沿著元件樹從上至下單項資料流動的應用。然後我們需要構建反向的資料流動方式：元件樹中層級很深的表單元件更新父級中的state。
如果嘗試在前面的輸入框中輸入，react會忽略你的輸入。這是有意的，因為已經設定了input的value屬性，使其總是和limitedinputbox（對於粗分的情況，就是其本身）傳遞過來的state一致。
但是我們希望的是，無論使用者何時改變了表單，都要更新state來反應使用者的輸入。由於元件只能更新自己的state，limitedinputbox將會傳遞乙個**函式給inputbox，此函式將會在state應該被改變時觸發。我們可以使用input的onchange事件來監聽使用者輸入，從而確定何時觸發**函式。
limitedinputbox傳遞的**函式將會呼叫setstate()，然後應用將會被更新。
/**author : river he*/
//細分結構
var data = $/
};var title = react.createclass();}
});var inputbox = react.createclass(,
fitregexp: function(inputtext) else
},render: function()
});reactdom.render(
,document.getelementbyid('example')
);
實現乙個高度自適應的輸入框
有placeholder，輸入為空時，顯示placeholder 可設定maxlength 將textarea的高度設定成auto，overflow設定成visible。如下 height auto overflow x visible overflow y visible width 300px ...
實現乙個高度自適應的輸入框
需求背景 設想1 使用textarea實現 將textarea的高度設定成auto，overflow設定成visible。如下 複製 但是經過測試，textarea實際上將是預設的高度，隨著輸入的增多會出現滾動條，並沒有達到我們想要的效果。設想2 contenteditable 我們知道可以將div...
乙個輸入框搜尋多個欄位SQL
例子 具體sql 是使用concat.不了解concat的使用就去簡單看一下就懂了，簡單的理解是字串的拼接 詳細 select from biz lis request information a left join biz lis sample c on a.barcode c.barcode c...