setValue和handleChange的冲突

来源:6-1 本章目标

慕尼黑0536602

2022-03-13

Hi 老师,我使用一个第三方库formik 和 yup 来提交EditText的数据,
并且做了一个简单的限制用户名输入字数的一个TextInput的封装,如下:
图片描述

以下是TextInput的封装,
出现了一个问题,就是我需要在onChangeText中同时使用:
1.用于后面计算字数:(text)=>setValue(text) ;
2.用于提交formik的value: handleChange(name) ;

根据我下面的代码,我只能实现其中的一个功能,您可以帮我看一下,是哪里出现问题吗?也即是,如何在onChangeText中添加两个不同的functions .

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

const AppFormFieldWithCount = ({name,number,maxLength,minHeigh,multiline,placeholder,...otherProps}) => {
    const {setFieldTouched,handleChange,errors,touched} = useFormikContext();
    const[value,setValue] = useState('');
  return (
   <>
    <View style={[styles.container,{height:minHeigh}]}>
   <TextInput placeholder={placeholder}
     style={{flex:1,fontSize:16}} 
     placeholder = {placeholder}
     multiline={multiline} 
     maxLength={maxLength}
     minHeigh ={minHeigh}
     onBlur = {()=>setFieldTouched(name)}
     onChangeText = {
     ()=>{
      (text)=>setValue(text);
      handleChange(name)
     }
    
     }
     {...otherProps}
      />
     <Text style={{position:'absolute',bottom:5,right:5,}}>{value === "" ? "0" : value.length}/{number}</Text>
     </View>
 <AppErrorMessage error={errors[name]} visible={touched[name]} />
   </>
  )
}

export default AppFormFieldWithCount

const styles = StyleSheet.create({
  container:{
    flexDirection:'row',
    borderRadius:5,
    borderWidth:1,
    borderColor:colors.medium,
    width:'100%',
    paddingHorizontal:10,
    marginVertical:10,

}
})
写回答

1回答

CrazyCodeBoy

2022-03-13

将(text)=>setValue(text);和handleChange(name)包装到一个方法中来调用试试看

0
2
CrazyCodeBoy
不是,你单独提取出一个方法,将它们放进去
2022-03-14
共2条回复

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

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

3144 学习 · 3241 问题

查看课程