[英]onChangeText callback function save previous input
iam new in react native and iam trying to create my first todo list app using react native and js i faced a problem in validation of this app iam using a textInput to take the task as input from the user and iam using onchangetext callback function我是 React Native 中的新手,我正在尝试使用 React Native 和 JS 创建我的第一个待办事项列表应用程序我在验证此应用程序时遇到问题我使用 textInput 将任务作为用户的输入,我使用 onchangetext 回调 function
<TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text =>{
console.log(text.length)
if(text.length==0){
checkEmpty(true);
setTask(null);
}
else{
checkEmpty(false);
setTask(text);
clearText('');
}
}}/>
and a buttom to create the task和一个创建任务的按钮
<TouchableOpacity onPress={()=>{
handleAddTask();
}}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
and this is the function handleAddTask这是 function handleAddTask
const handleAddTask=()=>{
Keyboard.dismiss();
if(isEmpty==false){
setTaskItems([...taskItems,task])
setTask('');
}
else{
Alert.alert('OOPS!','Todos must contain at least 1 character',[
{text:'Okay', onPress: ()=> console.log('Alert closed')}
]);
setTask('');
}
}
the problem here is that after the application start for the first time : if i didnt enter any input and press on the TouchableOpacity the alert pop up and after i enter any input and add a task and add it successfully when i press the TouchableOpacity again when the input is empty it create empty task to solve the problem i must type any character and delete it and press the TouchableOpacity to make the alert pop up again as the input is empty... i want to know how to solve this validation problem这里的问题是,在应用程序第一次启动后:如果我没有输入任何输入并按下 TouchableOpacity,则会弹出警报,在我输入任何输入并添加任务并在我再次按下 TouchableOpacity 时成功添加它输入为空它创建空任务来解决问题我必须键入任何字符并将其删除然后按 TouchableOpacity 使警报再次弹出输入为空...我想知道如何解决此验证问题
I tried playing along with your code and I think the isEmpty
state isn't working as expected (you didn't expose that part of code either).我试着玩你的代码,我认为
isEmpty
state 没有按预期工作(你也没有公开那部分代码)。 You can update your checkEmpty
after task
is updated.您可以在
task
更新后更新您的checkEmpty
。
useEffect(() => {
if(task.length) {
checkEmpty(false)
} else {
checkEmpty(true)
}
},[task])
But,actually you don't need to assign another state to check if the state is empty, you can just use task.length
to check.但是,实际上你不需要分配另一个 state 来检查 state 是否为空,你可以使用
task.length
来检查。
const [task, setTask] = React.useState('');
const [taskItems, setTaskItems] = React.useState([])
const handleAddTask=()=>{
// Keyboard.dismiss();
if(task){
setTaskItems(prev => [...prev,task])
setTask('');
}
else{
Alert.alert('OOPS!','Todos must contain at least 1 character',[
{text:'Okay', onPress: ()=> console.log('Alert closed')}
]);
// setTask('');
}
}
return (
<View style={styles.container}>
<TextInput
placeholder={'Write a task'}
value={task}
onChangeText={(text) => setTask(text)}
/>
<TouchableOpacity
onPress={() => {
handleAddTask();
}}>
<View style={{margin : 5}}>
<Text style={{fontSize: 24}}>+</Text>
</View>
</TouchableOpacity>
{taskItems.length ? taskItems.map(t=> <Text style={styles.paragraph}>{t}</Text>) : undefined}
</View>
);
Check on - snack.expo检查 - snack.expo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.