1. 程式人生 > >react native 中textInput的value屬性詳解

react native 中textInput的value屬性詳解

hold eric 工作 als size 保持 chang 無奈 bsp

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 native 中textInput的value屬性詳解