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

来源:1-2 课程导学

慕尼黑0536602

2021-05-27

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;
写回答

1回答

CrazyCodeBoy

2021-05-27

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

0
1
慕尼黑0536602
嗨老师,我试了很久,我不太确定,就是在Textinput外再单独包一个布局,如何能够监听到字数的变化呢?您可以给我个例子吗?谢谢您!!
2021-05-28
共1条回复

RN入门到进阶,打造高质量上线App

解锁React Native开发应用新姿势,React Native新版本热门技术

3170 学习 · 3256 问题

查看课程