React Native Modal中使用TextInput无法输入中文

[1uokun]

<Modal visible>
  <TextInput 
    onChange={(text)=>{this.setState({value:text})}}
    value={this.state.value}
 />
</Modal>

在Modal中使用完全受控状态^[1]的TextInput会出现无法输入中文（非英文）的bug（仅iOS）

解决

1. 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>

2. 不要让外部持续影响Modal内部更新

   2.1. Modal+TextInput 常作为弹窗表单提交组合，外部最多影响第一次的渲染，因此使用defaultValue承载首次默认值
   2.2. 应避免使用ref获取TextInput的值，保留onChange+state作为提交时获取的数据

参考

• [1]《什么是“受控组件”》 https://zh-hans.reactjs.org/docs/forms.html#controlled-components
• [2] 代码参考commit: ant-design/ant-design-mobile-rn@7623c36