React Native表单处理报错：Cannot read property 'value' of undefined

核心问题分析 #

你遇到的错误根源是对React Native的TextInput组件逻辑不熟悉：Web端输入框的回调参数是事件对象，但React Native的onChangeText直接返回输入的文本内容，不是事件，所以e.target根本不存在，自然会报value未定义的错误。除此之外，代码还有几处逻辑问题，一起修复如下：

具体修复步骤 #

1. 修正所有TextInput的onChangeText回调
   直接使用回调参数作为输入值，明确指定要更新的状态键名（比如text、fontSize），不要用[line?.text]这种错误的动态键（这会把当前文本内容当成键名，完全不符合需求）。

2. 修复提交逻辑
   lines是数组类型，之前用对象展开会把数组转成对象，正确做法是用数组展开添加新元素。同时要确保提交的新line对象格式正确，比如字号转成数字，颜色值处理好#前缀。

3. 状态更新改用函数式写法
   避免闭包导致的旧状态残留问题，比如setLine(prev => ({...prev, text: e}))，这样能拿到最新的状态值。

4. 细节优化

   • 初始状态里fontSize设为数字类型，避免渲染样式时出错；
   • 颜色输入框处理#前缀，避免重复输入；
   • 提交后清空输入框提升用户体验。

修复后的完整代码 #

import { useState } from 'react';
import {
  TextInput,
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  Button,
  ScrollView,
} from 'react-native';

const Home = () => {
  const [lines, setLines] = useState([
    {
      text: 'This is a default string',
      fontSize: 32,
      color: '#000000',
    },
  ]);
  const [line, setLine] = useState({
    text: '',
    fontSize: '',
    color: '',
  });

  const handleSubmit = () => {
    // 处理字号为数字，颜色补全#前缀
    const newLine = {
      text: line.text,
      fontSize: line.fontSize ? parseInt(line.fontSize, 10) : 16,
      color: line.color ? `#${line.color.replace('#', '')}` : '#000000',
    };
    // 数组添加新元素
    setLines(prev => [...prev, newLine]);
    // 清空输入框
    setLine({ text: '', fontSize: '', color: '' });
  };

  return (
    <View style={{ flex: 1 }}>
      <SafeAreaView>
        <Text style={styles.desc}>输入你的文本：</Text>
        <TextInput
          style={styles.input}
          value={line.text}
          onChangeText={(text) => setLine(prev => ({ ...prev, text }))}
        />
        <Text style={styles.desc}>选择字号：</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.input}
          value={line.fontSize}
          maxLength={3}
          onChangeText={(fontSize) => setLine(prev => ({ ...prev, fontSize }))}
        />
        <Text style={styles.desc}>选择十六进制颜色：</Text>
        <TextInput
          style={styles.input}
          value={line.color ? `#${line.color}` : ''}
          maxLength={7}
          onChangeText={(color) => {
            // 去掉开头的#，只保留颜色部分存到状态
            const cleanColor = color.replace('#', '');
            setLine(prev => ({ ...prev, color: cleanColor }));
          }}
        />
        <Button
          onPress={handleSubmit}
          title="生成文本"
          color="#841584"
        />
      </SafeAreaView>
      <ScrollView style={{ flex: 1 }}>
        {lines.map((myLine, index) => (
          <Text
            key={index}
            style={{
              fontSize: myLine.fontSize,
              color: myLine.color,
              margin: 15,
            }}>
            {myLine.text}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
  desc: {
    height: 40,
    margin: 'auto',
    padding: 10,
  },
});

export default Home;

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