React-native 的坑 之TextInput value

项目背景

需要做一个Listview 每个条目都有一个输入框，然后默认的不可以编辑，旁边有个编辑键，点击的话就能编辑

<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 函数类着这样写

submit(){ this.setState({ .....//省略，其实重绘之后 就会设置成你编辑的文字 }); }

但是问题来了，文本框虽然在可编辑的情况下但是一直不能输入文字，而且一直闪烁，引用官方的话说：

TextInput是一个受约束的(Controlled)的组件，意味着如果提供了value属性，原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好，不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入，可以考虑设置editable={false}；如果你是希望限制输入的长度，可以考虑设置maxLength属性，这两个属性都不会导致闪烁

我在这有两种解决办法

1. 用defaultValue 代替
2. 写成<TextInput>{model.name}</TextInput>这种形式

总结

react 坑路慢慢修远兮，吾将上下而求索