记一次 react-naitve TextInput 的一些坑

业务场景描述：

 

 

话不多说，直接上代码 关于 TextInput 输入框在什么时候清空文本内容

/** react 组建的引用 */
import React, {Component} from "react";
import {
  StyleSheet, Text, View, TextInput, Dimensions,Platform
} from "react-native";

const {width, height} = Dimensions.get('window');//屏幕宽度
export default class Vue2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          ref={ref => this._textInstance = ref} // 获取TextInput实例
          placeholder={"手机验证码！！！！！！"}
          style={{width: width, height: 40, borderWidth: 1}}
          onChangeText={(value) => {
            console.log(1111, '------onChangeText', value)
            this.state.inputValue = value  // 只是简单的赋值操作，页面不更新
          }}
          onEndEditing={() => {
            console.log(1111, '++++++++onEndEditing', this.state.inputValue)
            (Platform.OS === 'ios') && this.setState({inputValue: this.state.inputValue});
          }}
          value={this.state.inputValue}
        />

        <Text style={{fontSize: 20, marginTop: 30}} onPress={() => {
          this.setState({inputValue: ''})
        }
        }>{'点我清空输入'}</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

react-naitve 官网 https://reactnative.cn/docs/0.56/textinput/#onendediting 对TextInput  value 属性的描述如下：

TextInput是一个受约束的(Controlled)的组件，意味着如果提供了value属性，原生值会被强制与value属性保持一致

如上代码，只是单纯的赋值操作，不通过 setState() 方法重新渲染页面，清空方法时无效的，此时此刻 TextInput 中 value 绑定的 inputValue 依然是原生的 value ，因为默认一开始 我们的赋值 this.state.inputValue = '' 相当于没有提供 value 的值, 所以导致 原生的没有保持一致，点击清空按钮，无法清空输入。

onChangeText 的坑：

ios (打印结果如图) :

每一次键盘的输入都是一次 onChangeText 事件

android (打印结果) :

只有在最后一步等你确定好了输入结果，才执行 onChangeText 事件

因为两种事件执行的 时机不同，就会让我们调入深坑而无法自拔
如果你的代码和上面一样，在输入英文和数字的时候，老铁没毛病，默默地感谢一下公司的产品没有为难你，如果要求输入的是中文如第一张设计图（用户名，手机号，身份证号的强强验证）当你输入中文的时候就傻逼了

android 手机一切 ok 因为 onChangeText 事件只在最后一次执行，但是 ios 手机你会发现怎么也无法输入中文(因为每一次的state的都是去当前的输入值啊亲，而且每一次都 setState, 你说坑爹不肯爹 )，但是各位 可爱的 攻城狮萌不要害怕，在程序的世界里没有程序解决不了的问题（就看时间够不够久对吧！！！）。

既然已经知道为啥了，分析出了原因，解决问题也是分分钟的事情啦！！！只要判断一下手机型号就 ok 啦，解决问题之前我再介绍一下另外一个 属性  onEndEditing  顾名思义 当文本输入结束后调用此回调函数。

结合着两个属性就可完美的解决输入中文以及清除输入内容的问题啦
完整代码如下，各位看官，拿走不谢（后期会分享更多的干货）
 

import React, {Component} from "react";
import {
  StyleSheet, Text, View, TextInput, Dimensions,Platform
} from "react-native";

const {width, height} = Dimensions.get('window');//屏幕宽度
export default class Vue2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          ref={ref => this._textInstance = ref} // 获取TextInput实例
          placeholder={"手机验证码！！！！！！"}
          style={{width: width, height: 40, borderWidth: 1}}
          onChangeText={(value) => {
            console.log(1111, '------onChangeText', value)
            this.state.inputValue = value  // 这里的赋值，为了 onEndEditing 取值
            !(Platform.OS === 'ios') && this.setState({inputValue: value})
          }}
          onEndEditing={() => {
            console.log(1111, '++++++++onEndEditing', this.state.inputValue)
            (Platform.OS === 'ios') && this.setState({inputValue: this.state.inputValue});
          }}
          value={this.state.inputValue}
        />

        <Text style={{fontSize: 20, marginTop: 30}} onPress={() => {
          this.setState({inputValue: ''})
        }
        }>{'点我清空输入'}</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

更多的干货请点击这里 https://blog.csdn.net/woleigequshawanyier

react-native 实战项目学习 https://github.com/15826954460/BXStage

欢迎各位看官的批评和指正，共同学习和成长

希望该文章对您有帮助，也希望得到您的鼓励和支持