在 React Native 中从子组件 TextInput 更新父组件状态

Question

I have a list of survey questions as components for a user to fill out and am trying to go through each one and update the parent components state when the child components input field is filled out, however on the first component I keep on receiving the text from the TextInput as undefined.

This is my Parent component 'SurveyScreen':

export default function SurveyScreen({navigation, route}) {
  const [childNameValue, setChildNameValue] = useState('');

function handleChange(newValue) {
    setChildNameValue(newValue);
    console.log(childNameValue);
  }

return (
<ScrollView style={styles.cardContainer}>
        <View>
          <Text style={styles.title}>Please fill out all questions below</Text>
        </View>
        <View>

          <BasicTextInput
            title="Child's full name"
            value={childNameValue}
            onChange={handleChange}
          />
       );
}

And my Child component 'BasicTextInput':

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Platform,
  TextInput,
} from 'react-native';
import CheckBox from '@react-native-community/checkbox';

export default function BasicTextInput({title, onChange}, props) {
  const [text, onChangeText] = useState('');

  function handleChange(e) {
    onChange(e.target.value);
  }

  return (
    <View>
      <View>
        <Text>title</Text>
      </View>
      <View>
        <TextInput
          style={styles.input}
          onChange={handleChange}
          value={props.childNameValue}
        />
        <View />
      </View>
    </View>
  );
}

I've stripped out some styles and imports to keep it simple, when entering text on the BasicTextInput, the console log I get in my parent is 'Undefined'

I imagine I'm missing something simple but any help would be very appreciated! I have a number of these to do so want to get this initial component correct.

Thanks in advance.

Answer 1

Problem is in below line

export default function BasicTextInput({title, onChange}, props) {

Here BasicTextInput is component and it receives single argument as props so if you want to restructure it will be

export default function BasicTextInput({title, onChange}) {

Answer 2

I was able to accomplish this in the end by passing in an onChangeValue as a prop which takes the newValue and sets state to that newValue.

Here are both updated files as an example:

export default function SurveyScreen({navigation, route}) {
  const [childNameValue, setChildNameValue] = useState('');

return (
<ScrollView style={styles.cardContainer}>
        <View>
          <Text style={styles.title}>Please fill out all questions below</Text>
        </View>
        <View>

          <BasicTextInput
            title="Child's full name"
            value={childNameValue}
            onChangeValue={newValue => setChildNameValue(newValue)}
          />
       );
}

And my Child component file:

export default function BasicTextInput({title, onChangeValue}) {

  return (
    <View style={styles.container}>
      <View style={styles.containerHeader}>
        <Text style={styles.questionTitle}>{title}</Text>
      </View>
      <View style={styles.answerContainer}>
        <TextInput style={styles.input} onChangeText={onChangeValue} />
        <View />
      </View>
    </View>
  );
}

I hope this helps some of you in future!