React Native 在Modal中，使用TextInput
2022-08-23 本文已影响0人
罗坤_23333
<Modal visible>
<TextInput
onChange={(text)=>{this.setState({value:text})}}
value={this.state.value}
/>
</Modal>
在Modal中使用完全受控状态[1]的TextInput会出现无法输入中文（非英文）的bug（仅iOS）
解决
- TextInput必须为半受控状态
onOk=()=>{
// submit params
this.state.value
}
<Modal visible onOk={this.onOK}>
<TextInput
onChange={(text)=>{this.setState({value:text})}}
- value={this.state.value}
+ defaultValue={this.state.value}
/>
</Modal>
-
不要让外部持续影响Modal内部更新
2.1.
Modal+TextInput常作为弹窗表单提交组合，外部最多影响第一次的渲染，因此使用defaultValue承载首次默认值
2.2. 应避免使用ref获取TextInput的值，保留onChange+state作为提交时获取的数据
