textInput 格式化输入数据

Question

项目里一个小组件，需要格式化输入数据，类似给数字加千分位分隔符这样的功能，以前在web项目里，做过类似的功能，但是在react native试了下，没能成功。

我的思路是用户输入结束时，格式化数据，输入过程中暂时不考虑处理数据，主要是想使用onEndEditing这个方法来实现，但效果出不来，这个方法没有被调用。。。

<TextInput ref = 'textInput'
           style={styles.input}
           keyboardType='numeric'
           underlineColorAndroid={'transparent'}
           maxLength={10}
           defaultValue={defaultValue}
           onEndEditing={()=>{处理数据}}
/>

请教下各位，onEndEditing这个方法到底是怎么用的，RN实现这个功能，需要用到哪些方法？

Answer 1

...没有用过RN，不过应该也是js吧
你这个onEndEditing事件我没听过，我说哈我的两个思路
1.比较通用的失焦，onBlur里绑定
2.节流函数，让用户在一定延迟后再触发事件
原理是用定时器，让函数执行延迟n毫秒，在n毫秒内如果有函数又被调用则删除上一次调用，这次调用n毫秒后执行，如此往复，也就是在最后一次输入的n毫秒后，执行你的方法，这样也可以实现你的功能

function throttle(method,context){
    clearTimeout(method.tId);
    method.tId=setTimeout(function(){
        method.call(context);
    },500);
}

大致的节流函数是这样，你自己改改看吧

Answer 2

    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
    

订阅onChangeText事件来读取用户的输入