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)包装到一个方法中来调用试试看
022022-03-14
相似问题