React Native中<TextInput>无法获取值返回undefined问题求助

问题根源 #

你错误使用onChange事件获取输入值，且错误解构事件对象，导致text状态无法被正确更新，最终添加的todo中text字段为undefined。同时你绕开了React Native为TextInput专门提供的onChangeText属性，反而引发合成事件复用的警告。

修复方案 #

直接使用onChangeText属性替换onChange，它会直接将输入框的文本内容作为参数传递给回调函数，无需处理事件对象，同时也能避免合成事件复用的警告。

修改后的TextInput代码：

<TextInput 
  returnKeyType="done" 
  onSubmitEditing={addToDos}
  onChangeText={onChangeText} // 直接绑定已定义的回调
  value={text}  
  placeholder={ working ? "Add a To Do" : "Your Destination"} 
  style={styles.input}
/>

你的onChangeText函数无需修改：

const onChangeText = (payload) => setText(payload);

额外优化 #

整理addToDos函数的对象写法，提升可读性：

const addToDos = () => {
  if(text === ""){
    return;
  }
  const newToDos = {
    ...toDos, 
    [Date.now()]: {
      text, 
      work: working
    }
  };
  setTodos(newToDos);
  setText("");
};

原写法无效原因 #

onChange事件的参数是合成事件对象，输入值并不在EventTarget中，正确获取方式为event.nativeEvent.text，但这种写法完全没必要——onChangeText是React Native官方为简化输入值获取提供的属性，直接使用它就能避免所有额外的事件处理逻辑。

内容的提问来源于stack exchange，提问作者mapple