onChangeText 回调函数保存之前的输入

Question

我是 React Native 中的新成员我正在尝试使用 React Native 和 JS 创建我的第一个待办事项列表应用程序我在验证此应用程序时遇到问题我正在使用 textInput 将任务作为用户的输入，我正在使用 onchangetext 回调函数

<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>

这是函数 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 以使警报弹出当输入为空时再次向上 ...我想知道如何解决这个验证问题

Answer 1

我试过你的代码，我认为 isEmpty 状态没有按预期工作（你也没有公开那部分代码）。您可以在 task 更新后更新您的 checkEmpty。

useEffect(() => {
  if(task.length) {
    checkEmpty(false)
  } else {
    checkEmpty(true)
  }
},[task])

但是，实际上你不需要分配另一个状态来检查状态是否为空，你可以使用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

onChangeText 回调函数保存之前的输入

onChangeText callback function save previous input

javascript

node.js

reactjs

react-native

expo