項(xiàng)目背景
需要做一個(gè)Listview 每個(gè)條目都有一個(gè)輸入框，然后默認(rèn)的不可以編輯，旁邊有個(gè)編輯鍵，點(diǎn)擊的話就能編輯
<TextInput style={styles.label_name} editable={this.state.rowData.isEdit} multiline={false} autoFocus={false} maxLength={10} numberOfLines={1} blurOnSubmit={true} value={this.props.model.name} onSubmitEditing={()=>this.props.onSubmitEdit(this.state.rowData)} underlineColorAndroid={'transparent'}>{this.state.rowData.name}</TextInput>
然后在submit 函數(shù)類著這樣寫(xiě)
submit(){ this.setState({ .....//省略，其實(shí)重繪之后 就會(huì)設(shè)置成你編輯的文字 }); }
但是問(wèn)題來(lái)了，文本框雖然在可編輯的情況下但是一直不能輸入文字，而且一直閃爍，引用官方的話說(shuō)：
TextInput是一個(gè)受約束的(Controlled)的組件，意味著如果提供了value屬性，原生值會(huì)被強(qiáng)制與value屬性保持一致。在大部分情況下這都工作的很好，不過(guò)有些情況下會(huì)導(dǎo)致一些閃爍現(xiàn)象——一個(gè)常見(jiàn)的原因就是通過(guò)不改變value來(lái)阻止用戶進(jìn)行編輯。如果你希望阻止用戶輸入，可以考慮設(shè)置editable={false}；如果你是希望限制輸入的長(zhǎng)度，可以考慮設(shè)置maxLength屬性，這兩個(gè)屬性都不會(huì)導(dǎo)致閃爍
我在這有兩種解決辦法
- 用defaultValue 代替
- 寫(xiě)成
<TextInput>{model.name}</TextInput>這種形式
總結(jié)
react 坑路慢慢修遠(yuǎn)兮，吾將上下而求索
