![](/img/trans.png)
[英]pass multiple params onChangeText input element function - React native
[英]onChangeText callback function save previous input
我是 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('');
}
}}/>
和一个创建任务的按钮
<TouchableOpacity onPress={()=>{
handleAddTask();
}}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
这是 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('');
}
}
这里的问题是,在应用程序第一次启动后:如果我没有输入任何输入并按下 TouchableOpacity,则会弹出警报,在我输入任何输入并添加任务并在我再次按下 TouchableOpacity 时成功添加它输入为空它创建空任务来解决问题我必须键入任何字符并将其删除然后按 TouchableOpacity 使警报再次弹出输入为空...我想知道如何解决此验证问题
我试着玩你的代码,我认为isEmpty
state 没有按预期工作(你也没有公开那部分代码)。 您可以在task
更新后更新您的checkEmpty
。
useEffect(() => {
if(task.length) {
checkEmpty(false)
} else {
checkEmpty(true)
}
},[task])
但是,实际上你不需要分配另一个 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>
);
检查 - snack.expo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.