{"id":90106,"date":"2024-12-27T16:39:41","date_gmt":"2024-12-27T13:09:41","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/"},"modified":"2024-12-27T16:39:41","modified_gmt":"2024-12-27T13:09:41","slug":"macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/","title":{"rendered":"&#8220;Play Hongmeng on Mac with Hardware 13&#8221; Hongmeng UI Components Part 3 &#8211; \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a TextInput \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631"},"content":{"rendered":"<p>\u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Hongmeng\u060c<code>TextInput<\/code> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u0648\u0631\u0648\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u062a\u0646 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0641\u0635\u0644 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc Hongmeng \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f <code>TextInput<\/code> \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0633\u0628\u06a9\u060c \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u062c\u0639\u0628\u0647 \u062c\u0633\u062a\u062c\u0648\u060c \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc Hongmeng \u0628\u0647 \u0637\u0648\u0631 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<p><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#%DA%A9%D9%84%D9%85%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C\" >\u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#1_%D9%85%D8%A8%D8%A7%D9%86%DB%8C_%D8%AC%D8%B2%D8%A1_TextInput\" >1. \u0645\u0628\u0627\u0646\u06cc \u062c\u0632\u0621 TextInput<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#11_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\" >1.1 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u0627\u0633\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#2_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B3%D8%A8%DA%A9_TextInput\" >2. \u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9 TextInput<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#21_%D8%B3%D8%A8%DA%A9_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C\" >2.1 \u0633\u0628\u06a9 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#22_%D8%AD%D8%A7%D8%B4%DB%8C%D9%87_%D9%87%D8%A7_%D9%88_%DA%AF%D9%88%D8%B4%D9%87_%D9%87%D8%A7%DB%8C_%DA%AF%D8%B1%D8%AF\" >2.2 \u062d\u0627\u0634\u06cc\u0647 \u0647\u0627 \u0648 \u06af\u0648\u0634\u0647 \u0647\u0627\u06cc \u06af\u0631\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#23_%D8%B1%D9%86%DA%AF_%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87\" >2.3 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#3_%D9%86%D8%B8%D8%A7%D8%B1%D8%AA_%D8%A8%D8%B1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_TextInput\" >3. \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f TextInput<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#31_%D9%86%D8%B8%D8%A7%D8%B1%D8%AA_%D8%A8%D8%B1_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%88%D8%B1%D9%88%D8%AF%DB%8C\" >3.1 \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#32_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D9%85%D8%AA%D9%85%D8%B1%DA%A9%D8%B2_%D9%88_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%A7%D8%B2_%DA%A9%D8%A7%D9%86%D9%88%D9%86\" >3.2 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0645\u062a\u0645\u0631\u06a9\u0632 \u0648 \u062e\u0627\u0631\u062c \u0627\u0632 \u06a9\u0627\u0646\u0648\u0646<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#4_%D8%AA%D9%85%D8%B1%DB%8C%D9%86_TextInput_%D8%AC%D8%B9%D8%A8%D9%87_%D9%88%D8%B1%D9%88%D8%AF%DB%8C_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88\" >4. \u062a\u0645\u0631\u06cc\u0646 TextInput: \u062c\u0639\u0628\u0647 \u0648\u0631\u0648\u062f\u06cc \u062c\u0633\u062a\u062c\u0648<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#41_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AC%D8%B9%D8%A8%D9%87_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88\" >4.1 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062c\u0639\u0628\u0647 \u062c\u0633\u062a\u062c\u0648<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#42_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84_%D9%87%D8%A7%DB%8C_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C%DB%8C\" >4.2 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#5_%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA_%D9%85%D8%AA%D8%AF%D8%A7%D9%88%D9%84_%D9%88_%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_TextInput\" >5. \u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc TextInput<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#51_%D8%AD%D8%AF%D8%A7%DA%A9%D8%AB%D8%B1_%D8%AA%D8%B9%D8%AF%D8%A7%D8%AF_%DA%A9%D8%A7%D8%B1%D8%A7%DA%A9%D8%AA%D8%B1%D9%87%D8%A7_%D8%B1%D8%A7_%D9%85%D8%AD%D8%AF%D9%88%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >5.1 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627 \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#52_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%88%D8%B1%D9%88%D8%AF%DB%8C_%D8%B1%D8%A7_%D9%BE%D8%A7%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF\" >5.2 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#%D8%AE%D9%84%D8%A7%D8%B5%D9%87\" >\u062e\u0644\u0627\u0635\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D9%85%D9%82%D8%A7%D9%84%D9%87_%D8%A8%D8%B9%D8%AF%DB%8C\" >\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#%D9%85%D9%82%D8%A7%D9%84%D9%87_%D9%82%D8%A8%D9%84%DB%8C_%E2%80%9CPlay_Hongmeng_on_Mac_with_Hardware_12%E2%80%9D_Hongmeng_UI_Components_Part_2_%E2%80%93_Use_of_Image_Components\" >\u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644\u06cc:&#8220;Play Hongmeng on Mac with Hardware 12&#8221; Hongmeng UI Components Part 2 &#8211; Use of Image Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/macchang-wan-hong-meng-yu-ying-jian-13-hong-meng-uizu-jian-pian-3-textinputzu-jian-huo-qu-yong-hu-shu-ru-52on\/#%D9%85%D9%82%D8%A7%D9%84%D9%87_%D8%A8%D8%B9%D8%AF%DB%8C_%E2%80%9CPlay_Hongmeng_on_Mac_with_Hardware_14%E2%80%9D_Hongmeng_UI_Components_Part_4_%E2%80%93_Toggle_and_Checkbox_Components\" >\u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc:&#8220;Play Hongmeng on Mac with Hardware 14&#8221; Hongmeng UI Components Part 4 &#8211; Toggle and Checkbox Components<\/a><\/li><\/ul><\/nav><\/div>\n<h5><span class=\"ez-toc-section\" id=\"%DA%A9%D9%84%D9%85%D8%A7%D8%AA_%DA%A9%D9%84%DB%8C%D8%AF%DB%8C\"><\/span>\n<p>  <strong>\u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u062c\u0632\u0621 TextInput<\/li>\n<li>\u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631<\/li>\n<li>\u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc<\/li>\n<li>\u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f<\/li>\n<li>\u062a\u0627\u0628\u0639 \u062c\u0633\u062a\u062c\u0648<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"1_%D9%85%D8%A8%D8%A7%D9%86%DB%8C_%D8%AC%D8%B2%D8%A1_TextInput\"><\/span>\n<p>  <strong>1. \u0645\u0628\u0627\u0646\u06cc \u062c\u0632\u0621 TextInput<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><code>TextInput<\/code>  \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u0633\u0627\u0633\u06cc \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a \u0648 \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u0645\u062a\u0639\u062f\u062f\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc\u06cc\u060c \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062f\u06cc\u06af\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"11_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C\"><\/span>\n<p>  <strong>1.1 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u0627\u0633\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u06cc\u06a9 \u06a9\u0627\u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0645\u062a\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627 \u0648 \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>@State<\/code> \u0646\u0648\u0634\u062a\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">Component<\/span>\n  <span class=\"nx\">struct<\/span> <span class=\"nx\">TextInputDemo<\/span> <span class=\"p\">{<\/span>\n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">inputText<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u5b9a\u4e49\u72b6\u6001\u53d8\u91cf\u4fdd\u5b58\u8f93\u5165\u5185\u5bb9<\/span>\n\n    <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter text here<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u521b\u5efa\u5e26\u5360\u4f4d\u7b26\u7684\u8f93\u5165\u6846<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">onChange<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">inputText<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u76d1\u542c\u8f93\u5165\u53d8\u5316\uff0c\u5c06\u5185\u5bb9\u4fdd\u5b58\u5230 inputText<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">backgroundColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Pink<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u7c89\u8272<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Black<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u6587\u672c\u989c\u8272\u4e3a\u9ed1\u8272<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5217\u5bbd\u5ea6\u4e3a 100%<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5217\u9ad8\u5ea6\u4e3a 100%<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<blockquote>\n<p><strong>\u0645\u062b\u0627\u0644 \u0627\u0641\u06a9\u062a<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg0rfq62df743z5v47sfd.png\" alt=\"Screenshot_2024-10-28T200727.png\" width=\"800\" height=\"500\" title=\"\"><\/p>\n<\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"2_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B3%D8%A8%DA%A9_TextInput\"><\/span>\n<p>  <strong>2. \u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9 TextInput<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><code>TextInput<\/code>  \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0633\u0628\u06a9 \u0686\u0646\u062f\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0622\u0633\u0627\u0646 \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0641\u0648\u0646\u062a \u0647\u0627\u060c \u0645\u06a9\u0627\u0646 \u0647\u0627\u06cc\u06cc\u060c \u062d\u0627\u0634\u06cc\u0647 \u0647\u0627 \u0648 \u062a\u0631\u0627\u0632.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"21_%D8%B3%D8%A8%DA%A9_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C\"><\/span>\n<p>  <strong>2.1 \u0633\u0628\u06a9 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0631\u0646\u06af \u062c\u0627\u06cc\u06af\u06cc\u0631 \u0648 \u0633\u0628\u06a9 \u0642\u0644\u0645 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter your username<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5360\u4f4d\u7b26\u6587\u672c<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">placeholderColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Gray<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5360\u4f4d\u7b26\u989c\u8272\u4e3a\u7070\u8272<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">18<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u4e3a 18<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">fontWeight<\/span><span class=\"p\">(<\/span><span class=\"nx\">FontWeight<\/span><span class=\"p\">.<\/span><span class=\"nx\">Normal<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u7c97\u7ec6\u4e3a\u6b63\u5e38<\/span>\n<\/code><\/pre>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"22_%D8%AD%D8%A7%D8%B4%DB%8C%D9%87_%D9%87%D8%A7_%D9%88_%DA%AF%D9%88%D8%B4%D9%87_%D9%87%D8%A7%DB%8C_%DA%AF%D8%B1%D8%AF\"><\/span>\n<p>  <strong>2.2 \u062d\u0627\u0634\u06cc\u0647 \u0647\u0627 \u0648 \u06af\u0648\u0634\u0647 \u0647\u0627\u06cc \u06af\u0631\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0639\u0628\u0648\u0631 \u06a9\u0646\u062f <code>borderColor<\/code> \u0648 <code>borderRadius<\/code> \u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u062d\u0627\u0634\u06cc\u0647 \u0648 \u062c\u0644\u0648\u0647 \u06af\u0648\u0634\u0647 \u0647\u0627\u06cc \u06af\u0631\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter your password<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5360\u4f4d\u7b26\u6587\u672c<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">borderColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Blue<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u8fb9\u6846\u989c\u8272\u4e3a\u84dd\u8272<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">borderWidth<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u8fb9\u6846\u5bbd\u5ea6\u4e3a 2<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">borderRadius<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5706\u89d2\u534a\u5f84\u4e3a 10<\/span>\n<\/code><\/pre>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"23_%D8%B1%D9%86%DA%AF_%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87\"><\/span>\n<p>  <strong>2.3 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>backgroundColor<\/code> \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Type here...<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5360\u4f4d\u7b26\u6587\u672c<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">backgroundColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Gray<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u7070\u8272<\/span>\n<\/code><\/pre>\n<\/div>\n<blockquote>\n<p><strong>\u0645\u062b\u0627\u0644 \u0627\u0641\u06a9\u062a<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F40jz2now65f57npfyhd8.png\" alt=\"Screenshot_2024-10-28T200813.png\" width=\"800\" height=\"500\" title=\"\"><\/p>\n<\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"3_%D9%86%D8%B8%D8%A7%D8%B1%D8%AA_%D8%A8%D8%B1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_TextInput\"><\/span>\n<p>  <strong>3. \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f TextInput<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"31_%D9%86%D8%B8%D8%A7%D8%B1%D8%AA_%D8%A8%D8%B1_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%88%D8%B1%D9%88%D8%AF%DB%8C\"><\/span>\n<p>  <strong>3.1 \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>onChange<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u0646\u0638\u0627\u0631\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>@State<\/code> \u0645\u062a\u063a\u06cc\u0631:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">Component<\/span>\n  <span class=\"nx\">struct<\/span> <span class=\"nx\">InputListener<\/span> <span class=\"p\">{<\/span>\n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">userInput<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u5b9a\u4e49\u72b6\u6001\u53d8\u91cf\u4fdd\u5b58\u8f93\u5165\u5185\u5bb9<\/span>\n\n    <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter text here<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u521b\u5efa\u5e26\u5360\u4f4d\u7b26\u7684\u8f93\u5165\u6846<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">onChange<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">userInput<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8f93\u5165\u5185\u5bb9\u53d8\u5316\u65f6\uff0c\u66f4\u65b0 userInput<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">18<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u4e3a 18<\/span>\n\n        <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"s2\">`You entered: <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">userInput<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u663e\u793a\u8f93\u5165\u7684\u5185\u5bb9<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u663e\u793a\u6587\u672c\u7684\u5b57\u4f53\u5927\u5c0f\u4e3a 16<\/span>\n          <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">top<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u4e0a\u8fb9\u8ddd\u4e3a 10<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"32_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D9%85%D8%AA%D9%85%D8%B1%DA%A9%D8%B2_%D9%88_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%A7%D8%B2_%DA%A9%D8%A7%D9%86%D9%88%D9%86\"><\/span>\n<p>  <strong>3.2 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0645\u062a\u0645\u0631\u06a9\u0632 \u0648 \u062e\u0627\u0631\u062c \u0627\u0632 \u06a9\u0627\u0646\u0648\u0646<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>onFocus<\/code> \u0648 <code>onBlur<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u062a\u0645\u0631\u06a9\u0632 \u0648 \u0639\u062f\u0645 \u0641\u0648\u06a9\u0648\u0633 \u062c\u0639\u0628\u0647 \u0648\u0631\u0648\u062f\u06cc \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a \u062e\u0627\u0635:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Type your message<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u521b\u5efa\u5e26\u5360\u4f4d\u7b26\u7684\u8f93\u5165\u6846<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">onFocus<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Input field focused<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"c1\">\/\/ \u8f93\u5165\u6846\u805a\u7126\u65f6\uff0c\u8f93\u51fa\u65e5\u5fd7<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">onBlur<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Input field unfocused<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"c1\">\/\/ \u8f93\u5165\u6846\u5931\u7126\u65f6\uff0c\u8f93\u51fa\u65e5\u5fd7<\/span>\n<\/code><\/pre>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"4_%D8%AA%D9%85%D8%B1%DB%8C%D9%86_TextInput_%D8%AC%D8%B9%D8%A8%D9%87_%D9%88%D8%B1%D9%88%D8%AF%DB%8C_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88\"><\/span>\n<p>  <strong>4. \u062a\u0645\u0631\u06cc\u0646 TextInput: \u062c\u0639\u0628\u0647 \u0648\u0631\u0648\u062f\u06cc \u062c\u0633\u062a\u062c\u0648<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0627\u0642\u0639\u06cc\u060c<code>TextInput<\/code> \u0627\u063a\u0644\u0628 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062c\u0639\u0628\u0647 \u062c\u0633\u062a\u062c\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u062f \u0648 \u0648\u0638\u06cc\u0641\u0647 \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062f\u0627\u0631\u062f.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"41_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AC%D8%B9%D8%A8%D9%87_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88\"><\/span>\n<p>  <strong>4.1 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062c\u0639\u0628\u0647 \u062c\u0633\u062a\u062c\u0648<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u06cc\u06a9 \u06a9\u0627\u062f\u0631 \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u067e\u0627\u06a9 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">Component<\/span>\n  <span class=\"nx\">struct<\/span> <span class=\"nx\">SearchInput<\/span> <span class=\"p\">{<\/span>\n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">searchText<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ \u5b9a\u4e49\u72b6\u6001\u53d8\u91cf\u4fdd\u5b58\u641c\u7d22\u5185\u5bb9<\/span>\n\n    <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Search here...<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u641c\u7d22\u8f93\u5165\u6846\u5360\u4f4d\u7b26<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">onChange<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchText<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8f93\u5165\u53d8\u5316\u65f6\u66f4\u65b0 searchText<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Black<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u989c\u8272\u4e3a\u9ed1\u8272<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">backgroundColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Gray<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u7070\u8272<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">18<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u4e3a 18<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">80%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5bbd\u5ea6\u4e3a 80%<\/span>\n\n          <span class=\"nc\">Button<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Clear<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u521b\u5efa\u6e05\u9664\u6309\u94ae<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchText<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u70b9\u51fb\u6e05\u9664\u6309\u94ae\u65f6\u6e05\u7a7a\u641c\u7d22\u5185\u5bb9<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">60<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u6309\u94ae\u5bbd\u5ea6\u4e3a 60<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5de6\u8fb9\u8ddd\u4e3a 10<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">20<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u4e0b\u8fb9\u8ddd\u4e3a 20<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchText<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Searching for: <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchText<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u663e\u793a\u5f53\u524d\u8f93\u5165\u7684\u641c\u7d22\u5185\u5bb9<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u4e3a 16<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Blue<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u989c\u8272\u4e3a\u84dd\u8272<\/span>\n        <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Please enter a search term.<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u5f53\u6ca1\u6709\u8f93\u5165\u65f6\u663e\u793a\u63d0\u793a\u6587\u672c<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u4e3a 16<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">Gray<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5b57\u4f53\u989c\u8272\u4e3a\u7070\u8272<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u6574\u4f53\u5bb9\u5668\u5185\u8fb9\u8ddd\u4e3a 20<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"42_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84_%D9%87%D8%A7%DB%8C_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  <strong>4.2 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\n<code>searchText<\/code>  \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<code>TextInput<\/code>  \u0645\u06a9\u0627\u0646 \u0646\u06af\u0647\u062f\u0627\u0631\u0646\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0627\u0633 \u06a9\u0646\u06cc\u062f <code>onChange<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u0646\u062f <code>searchText<\/code>.<\/li>\n<li>\n<code>Button<\/code>  \u062f\u06a9\u0645\u0647 \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06a9 \u0645\u06cc \u0634\u0648\u062f. <code>searchText<\/code>\u060c \u0645\u062d\u062a\u0648\u0627\u06cc \u062c\u0639\u0628\u0647 \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0631\u0646\u062f\u0631 \u0634\u0631\u0637\u06cc \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648 \u06cc\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"5_%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA_%D9%85%D8%AA%D8%AF%D8%A7%D9%88%D9%84_%D9%88_%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_TextInput\"><\/span>\n<p>  <strong>5. \u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc TextInput<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"51_%D8%AD%D8%AF%D8%A7%DA%A9%D8%AB%D8%B1_%D8%AA%D8%B9%D8%AF%D8%A7%D8%AF_%DA%A9%D8%A7%D8%B1%D8%A7%DA%A9%D8%AA%D8%B1%D9%87%D8%A7_%D8%B1%D8%A7_%D9%85%D8%AD%D8%AF%D9%88%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>5.1 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627 \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>maxLength<\/code> \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter your username<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5360\u4f4d\u7b26\u6587\u672c<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">maxLength<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u9650\u5236\u6700\u591a\u8f93\u5165 10 \u4e2a\u5b57\u7b26<\/span>\n<\/code><\/pre>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"52_%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D9%88%D8%B1%D9%88%D8%AF%DB%8C_%D8%B1%D8%A7_%D9%BE%D8%A7%DA%A9_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  <strong>5.2 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<ul>\n<li>\u0628\u0631\u0627\u06cc \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u0633\u0631\u06cc\u0639 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc\u060c \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u067e\u0627\u06a9 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u06a9\u0627\u062f\u0631 \u0648\u0631\u0648\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code>  <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nc\">TextInput<\/span><span class=\"p\">({<\/span> <span class=\"na\">placeholder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Type here...<\/span><span class=\"dl\">'<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5360\u4f4d\u7b26\u6587\u672c<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">onChange<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u7ed1\u5b9a\u5185\u5bb9\u53d8\u5316<\/span>\n\n    <span class=\"nc\">Button<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Clear<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u521b\u5efa\u6e05\u9664\u6309\u94ae<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u70b9\u51fb\u6e05\u9664\u6309\u94ae\u65f6\u6e05\u7a7a\u5185\u5bb9<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">50<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u6309\u94ae\u5bbd\u5ea6\u4e3a 50<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span> <span class=\"c1\">\/\/ \u8bbe\u7f6e\u5de6\u8fb9\u8ddd\u4e3a 10<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D8%AE%D9%84%D8%A7%D8%B5%D9%87\"><\/span>\n<p>  <strong>\u062e\u0644\u0627\u0635\u0647<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>TextInput<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0645\u0624\u0644\u0641\u0647\u060c \u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9\u060c \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u060c \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f \u0639\u0645\u0644\u06cc \u06a9\u0627\u062f\u0631 \u062c\u0633\u062a\u062c\u0648 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u062f \u062a\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Hongmeng \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D9%85%D9%82%D8%A7%D9%84%D9%87_%D8%A8%D8%B9%D8%AF%DB%8C\"><\/span>\n<p>  <strong>\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc Switch \u0648 Checkbox \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u062a\u0648\u0627\u0628\u0639 \u0633\u0648\u0626\u06cc\u0686\u06cc\u0646\u06af \u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%A7%D9%84%D9%87_%D9%82%D8%A8%D9%84%DB%8C_%E2%80%9CPlay_Hongmeng_on_Mac_with_Hardware_12%E2%80%9D_Hongmeng_UI_Components_Part_2_%E2%80%93_Use_of_Image_Components\"><\/span>\n<p>  <strong>\u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644\u06cc:<\/strong>&#8220;Play Hongmeng on Mac with Hardware 12&#8221; Hongmeng UI Components Part 2 &#8211; Use of Image Components<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%A7%D9%84%D9%87_%D8%A8%D8%B9%D8%AF%DB%8C_%E2%80%9CPlay_Hongmeng_on_Mac_with_Hardware_14%E2%80%9D_Hongmeng_UI_Components_Part_4_%E2%80%93_Toggle_and_Checkbox_Components\"><\/span>\n<p>  <strong>\u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc:<\/strong>&#8220;Play Hongmeng on Mac with Hardware 14&#8221; Hongmeng UI Components Part 4 &#8211; Toggle and Checkbox Components<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Hongmeng\u060cTextInput \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u0648\u0631\u0648\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u062a\u0646 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0641\u0635\u0644 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc Hongmeng \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f TextInput \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0633\u0628\u06a9\u060c \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u062c\u0639\u0628\u0647 \u062c\u0633\u062a\u062c\u0648\u060c \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":90107,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-90106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/90106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=90106"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/90106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/90107"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=90106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=90106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=90106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}