ReactNative-無法讀取表單處理中未定義的屬性“值”

所以我第一次體驗 React Native，我正在創建一個應用程式來收集用戶輸入并使用表單引數呈現字串集合，但是當我嘗試填充輸入欄位時，我仍然遇到相同的錯誤：

Cannot read property 'value' of undefined 

關于表格處理，我應該如何解決這個問題？感謝您的關注。這是代碼：

import {React, 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 = e => {
    setlines({...lines, line});
  };

  return (
    <View>
      <SafeAreaView>
        <Text style={styles.desc}>Insert your quote here:</Text>
        <TextInput
          style={styles.input}
          value={line?.text}
          onChangeText={e => setline({...line, [line?.text]: e.target.value})}
        />
        <Text style={styles.desc}>Insert choose font size:</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.input}
          value={line?.fontSize}
          maxLength={3}
          onChangeText={e =>
            setline({...line, [line?.fontSize]: parseInt(e.target.value, 10)})
          }
        />
        <Text style={styles.desc}>Insert choose Hex color:</Text>
        <TextInput
          style={styles.input}
          value={`#${line?.color}`}
          maxLength={7}
          onChangeText={e => setline({...line, [line?.color]: e.target.value})}
        />
        <Button
          onPress={handleSubmit}
          title="Generate paragraph"
          color="#841584"
        />
      </SafeAreaView>
      <ScrollView>
        {lines.map((myLine, index) => (
          <Text
            key={index}
            // eslint-disable-next-line react-native/no-inline-styles
            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;

試圖處理行內輸入，但沒有解決問題

uj5u.com熱心網友回復：

根據檔案，TextInput onChangeText呼叫callback functions在.textTextInput

e.target不是有效的財產，

我認為你有一些ReactJs背景，因此你犯了這個錯誤。

uj5u.com熱心網友回復：

我已經在幾個地方更正了您的代碼。這是一個點心

import {React, 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 = e => {
    setlines([...lines, line]);
  };

  return (
    <View>
      <SafeAreaView>
        <Text style={styles.desc}>Insert your quote here:</Text>
        <TextInput
          style={styles.input}
          value={line.text}
          onChangeText={text => setline({...line, text })}
        />
        <Text style={styles.desc}>Insert choose font size:</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.input}
          value={line.fontSize}
          maxLength={3}
          onChangeText={fontSizeStr =>
            setline({...line, fontSize: parseInt(fontSizeStr, 10)})
          }
        />
        <Text style={styles.desc}>Insert choose Hex color:</Text>
        <TextInput
          style={styles.input}
          value={line.color}
          maxLength={7}
          onChangeText={color => setline({...line, color })}
        />
        <Button
          onPress={handleSubmit}
          title="Generate paragraph"
          color="#841584"
        />
      </SafeAreaView>
      <ScrollView>
        {lines.map((myLine, index) => (
          <Text
            key={index}
            // eslint-disable-next-line react-native/no-inline-styles
            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;

標籤：反应反应本机反应挂钩

上一篇：渲染的鉤子比預期的少。這可能是由ReactHooks中意外的提前回傳陳述句引起的

下一篇：我未定義，當使用背景關系掛鉤將值傳遞給我的組件時