Hi老师，TextInput中的onChangeText如何才能传入两个事件呢？

Question

Hi 老师，

我在做一个功能：用户输入自我介绍后，上传表单。
其中，用户自我介绍不能超过50个字符，如下图：

我需要实现，字数的同步增加（用户输入的时候有变化），然后最后能够上传输入的内容。
我用了formik的handlechange做了一个component .但是发现，onChangeText如果传入两个事件，前面的事件会被第二个事件所代替。。然后我又尝试在外面做一个函数（就是将两个事件提到外面，然后传给onChangeText），也不行。。。 我不太确定是否操作不当，能麻烦您帮我看下代码吗？谢谢你哈！！

import React,{useState} from 'react';
import { StyleSheet,View,Text,TextInput } from 'react-native';
import ErrorMsg from './ErrorMsg';
import { useFormikContext } from 'formik';
import colors from '../config/colors';


function AppFormFliedUserInfo({name,width='90%',number,style,...otherProps}) {
   const{setFieldTouched, handleChange, errors, touched }= useFormikContext();
   const [value,setValue] = useState('');
   
     return (
        <View style={[styles.container,{width:width} ,style]}>
        <View style={styles.first_container}>
        <ErrorMsg error={errors[name]} visible={touched[name]}/>
        <TextInput
        onBlur = {()=>setFieldTouched(name)}
        onChangeText = {handleChange(name)}
        width = {width}
        number ={number}
        maxLength={number}
        {...otherProps}
        />
        </View>
         {/**Count */}
       {number&&(
            <View style={styles.count_container}>
          <Text>{value === "" ? "0" : value.length}/{number}</Text>
            </View>
       )}
            
        </View>
    );
}


const styles = StyleSheet.create({
    count_container : {
        width : "100%",
        alignItems : 'flex-end',
        marginTop : 10,
    },
    container :{
        padding: 15,
        flexDirection: "column",
        marginVertical : 10,
        borderRadius: 25,
        backgroundColor: colors.light,
    },
    first_container : {
        flexDirection : "row",
        flex : 1,
       
    },
})
export default AppFormFliedUserInfo;

Answer 1

CrazyCodeBoy 2021-05-27 21:18:24

建议在textinput外单独包一个布局来实现数字的变化

• 提问者 慕尼黑0536602 #1

  嗨老师，我试了很久，我不太确定，就是在Textinput外再单独包一个布局，如何能够监听到字数的变化呢？您可以给我个例子吗？谢谢您！！