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就能完美完成我的期望了。