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

Posted 2023-02-23

【中文标题】在 React Native 中从子组件 TextInput 更新父组件状态

【英文标题】：Updating Parent component state from Child component TextInput in React Native

【发布时间】：2021-12-27 13:43:53

【问题描述】：

我有一个调查问题列表作为用户填写的组件，并且我正在尝试遍历每个问题并在填写子组件输入字段时更新父组件状态，但是在第一个组件上我继续从 TextInput 接收未定义的文本。

这是我的父组件“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
          />
       );

还有我的子组件“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>
  );

为了简单起见，我删除了一些样式和导入，当在 BasicTextInput 上输入文本时，我在父级中获得的控制台日志是“未定义”

我想我错过了一些简单的东西，但任何帮助都会非常感激！我有很多这样的事情要做，所以想让这个初始组件正确。

提前致谢。

【参考方案1】：

问题在下面一行

export default function BasicTextInput(title, onChange, props) 

这里 BasicTextInput 是组件，它接收单个参数作为道具，所以如果你想重组它会是

export default function BasicTextInput(title, onChange) 

【讨论】：

感谢您的帮助，但我删除了道具并更改为 value=childNameValue 传递 childNameValue 作为解构，我仍然在父控制台中收到 undefined.log

因为您的代码中存在另一个问题，您应该在 TextInput 中使用了 onChangeText，您按照您的代码进行了操作。

我明白了，现在说得通了。感谢您的帮助和提醒！

【参考方案2】：

我最终能够通过传入一个 onChangeValue 作为道具来实现这一点，该道具采用 newValue 并将状态设置为该 newValue。

以下是两个更新文件的例子：

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)
          />
       );

还有我的子组件文件：

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

我希望这对你们中的一些人有所帮助！