1. 程式人生 > >React-Native填坑之TextInput value屬性

React-Native填坑之TextInput value屬性

 TextInput用法就不多講了,主要記錄下遇到的一個怪問題。

    背景:專案需要開發一個充值頁面,需要一個輸入框,然後幾個按鈕,輸入框是允許使用者自己輸入任意金額,按鈕是可以讓使用者快捷選擇金額。     那麼問題來了,一般來說是改變文字框的值就可以了。     比如這樣
<TextInput
    placeholderTextColor='#cccccc'
    underlineColorAndroid='transparent'
    keyboardType={'numeric'}
    style={styles.inputStyle}
    value ={this.state.money}
    onChangeText={(text)=>this.changeMoney(text)}
/>
然後在其他需要改變value值的地方,這樣寫
checkMoney(text) {
    this.setState({
        money: text
    });
}
樂觀的情況是:我可以點選按鈕可以改變文字框的值,也可以使用者自己輸入,
但是,但是,但是,重點來了,它根本不讓你輸入,游標一直閃爍。
看了文件,給的解釋是:
TextInput是一個受約束的(Controlled)的元件,意味著如果提供了value屬性,原生值會被強制與value屬性保持一致。在大部分情況下這都工作的很好,
不過有些情況下會導致一些閃爍現象——一個常見的原因就是通過不改變value來阻止使用者進行編輯。如果你希望阻止使用者輸入,
可以考慮設定editable={false};如果你是希望限制輸入的長度,可以考慮設定maxLength屬性,這兩個屬性都不會導致閃爍。
然而加上沒有什麼卵用。
無奈只有再去找看看有沒有什麼可用的屬性,沒想到被我找到了,激動的要寫一篇文章來記錄下。

提供一個文字框中的初始值。當用戶開始輸入的時候,值就可以改變。

在一些簡單的使用情形下,如果你不想用監聽訊息然後更新value屬性的方法來保持屬性和狀態同步的時候,就可以用defaultValue來代替。

描述的還是雲裡霧裡的,但是用defaultValue來代替value就能完美完成我的期望了。

相關推薦

React-NativeTextInput value屬性

 TextInput用法就不多講了,主要記錄下遇到的一個怪問題。     背景:專案需要開發一個充值頁面,需要一個輸入框,然後幾個按鈕,輸入框是允許使用者自己輸入任意金額,按鈕是可以讓使用者快捷選擇

React Native旅 -- 使用iOS原生檢視(高德地圖)

在開發React Native的App的時候,你會遇到很多情況是原生的檢視元件已經開發好了的。有的是系統的SDK提供的,有的是第三方試圖元件,總之你的APP可以直接使用的原生檢視是很多的。React Native提供了一套完善的機制,你可以非常簡單的用來包裝已有

React-Native 記錄

最近在弄一個app的框架的調研,小公司,希望的學習成本低的框架,最後選擇react-native。框架很厲害:Facebook開源,這個框架的家世還是可以的。相容android,ios。支援ws,xmlhttprequest,fetch。有很多豐富的第三方UI庫,antd-m

React Native開發】React Native控制元件TextInput元件講解與QQ登入介面實現(11)

轉載請標明出處:(一)前言      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org       今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置

react-native開發總結TextInput失去焦點觸發事件和TextInput間切換

問題:如何在TextInput失去焦點觸發事件? 需求:在TextInput輸入文字後,旁邊有個取消按鈕,點選取消按鈕會有事件觸發。(模糊搜尋) 突發情況:在TextInput獲取焦點後我需要觸發點選事件,需要點選兩次:第一次失去焦點,第二次方可觸發點選事件; 百度

React Native 記 ----- react-navigation_標題居中

很少寫blog,尤其是技術類的,今天看了下RN已經升級到55了,記得之前用的還是在43版本,新功能就不多說了,自己去看React Nativ官網。剛剛用了下react-navigation,發現很玩,但是也遇到了一些坑,以下是填坑。1,標題文字設定react-navigati

React Native路 — 執行Android專案的各種(Windows)

之前我們已經初始化了一個Raect Native 專案,驗證了Android環境的正確性,接下來就執行起來吧! 執行命令:        ① react-native start        ② react-native run-android 執行步驟: 1.

REACT NATIVE 系列教程十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式

補充說明:一:很多童鞋問,鍵盤調出來被擋住了,那麼下面給出三個解決方案:1. 在render最外層包一個ScrollView,然後當鍵盤調出時,scrollTo即可實現。2. 在底部新增一個可變化高度的view,根據鍵盤獲取、失去焦點時,進行處理實現二:有的童鞋說對話方塊的背景沒有根據內容長短自適應,OK ,

React Native環境配置Windows版本搭建

services 就會 wrapper function 新建項目 之前 path ont 系統 接近年底了,回想這一年都做了啥,學習了啥,然後突然發現,這一年買了不少書,看是看了,就沒有完整看完的。悲催。然後,最近項目也不是很緊了,所以抽空學習了H5。自學啃書還是很無趣的

React Native開發】React Native控件ProgressBarAndroid進度條解說(12)

ice 發現 來講 top 文章 func dev all ios 轉載請標明出處:http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】

React Native布局

enter body ima lower posit 不能 效果 ignite 定位 讀懂這篇文章,RN布局不是問題 寬度單位和像素密度 react的寬度不支持百分比,設置寬度時不需要帶單位 {width: 10}, 那麽10代表的具體寬度是多少呢? 不知

微信JSSDK分享--挖坑小結

file com 附錄 success 成功 文檔 -i 是把 n)   最近參與微信服務號小項目的開發,關於微信分享,我是只知其功能,並沒深入了解其中的彎彎道道。雖然項目中不是我負責微信分享這一塊(因為我也不太會),但是團隊在這個功能上,那可是說多了都是淚,耗費了超級多的

記錄一下openvpn,

openvpn題目,占位。。。整理一下,工作中遇到的openvpn的問題需求:兩個辦公地點:青島、北京;北京的小夥伴需要訪問青島辦公區的內網,同時需要訪問阿裏雲服務器。解決方案:在阿裏雲跳板機上以及青島辦公區安裝openvpn。jumper上之起server,青島辦公區起server+client。遇到的問題

React Native隨筆——組件TextInput

images searchbox arc selection ive .cn parent tof under 一、實例   先看一下我要做的搜索框的樣子 需要一個Image,和一個TextInput 去掉默認下劃線 underlineColorAndroid=‘tra

tensorboard的可視化小白踩

main session png lose 分享 cts program use vid 首先說tensorflow這個框架是真的很是強大,圖像的識別,以及神經網絡的構建,還有就是不得不說的可視化工具tensorboard,這個工具一般是伴隨著tensorflow的安裝

React-Native組件ListView

ListView在使用dataSource時,我們需要先new一個dataSource對象 constructor(){ super(); this.state = { movies:new ListView.DataSource({

開發小程序(路,遇到一點就更新一點)

頁面 for page 開發工具 sign 上傳 nco lse tor 1.開發小程序發送請求時,報錯不在以下合法列表中: 在開發工具詳情中設置: 請參考微信官方文檔:關於小程序網絡相關API說明 2.如果你需要權限驗證(如登錄後訪問),小程序不像瀏覽器能幫你自動攜

vue全局引入less,scss,styl文件

正常 組件 spa ase pan 文件 all 原因 處理 每次全局引入less文件都是心累的旅程,木有一次能正常啟動的,啊,好在最後都解決了,但是原理,本姑娘還是不懂 以全局引入less文件為例 首先安裝less的依賴包 用的cnpm install 淘寶鏡像文件下載

由hosts問題引發的問題

一開始連線memcached報錯SERVER HAS FAILED AND IS DISABLED UNTIL TIMED RETRY; 排錯步驟: 1, 檢視memcached服務端是否啟動,ps aux |grep memcached, 顯示啟動 2,檢視memcached服務端埠狀態,nets

日常TF模型載入“Key Variable_xxx not found in checkpoint”

儲存模型的時候一切正常,但是載入的時候就會出現“Key Variable_xxx not found in checkpoint”錯誤。首先要分析錯誤原因,一般情況下model.ckpt檔案肯定都有的,都是載入的時候出的問題。所以先把ckpt檔案中的變數打印出來看看。這裡有個前提條件,定