如何将状态传递给父级？答案

【问题标题】：How to pass state into Parent?如何将状态传递给父级？
【发布时间】：2021-05-12 18:30:25
【问题描述】：

我是 React 的新手，我正在制作一个小型单页应用程序，我正在尝试弄清楚如何将员工 ID 传递给父级。

所以这里有一个问题，我已经知道了....但试图找出解决方案。

首先会有 3 个屏幕以 ID 开头。

当我将它作为下面列出的代码时，每次我输入时，状态都会重新呈现，但是它确实有效。打字真的很烦人。

import React, { useState } from 'react';
import {
  Container,
  Header,
  Title,
  Body,
  Content,
  Item,
  Input,
  Icon,
  Text,
  View,
} from 'native-base';

export default function App() {
  const [id, setId] = useState('');

  const IdScreen = () => {
    return (
      <View>
        <Text>Enter your Employee ID</Text>
        <Item rounded style={styles.textBox}>
          <Icon type='Ionicons' name='person' style={{ fontSize: 30 }} />
          <Input
            onChangeText={(text) => {
              setId(text);
            }}
            value={id}
          />
        </Item>
      </View>
    );
  };
  return (
    <Container>
      <Header>
        <Body>
          <Title>Employee Enroll</Title>
        </Body>
      </Header>
      <Content>
        <IdScreen />
      </Content>
    </Container>
  );
}

如果我进行此更改...打字部分很好，但是当我将其推送到 API 时，它将无法读取。

const IdScreen = () => {
   const [id, setId] = useState('');
    return (
      <View>
        <Text>Enter your Employee ID</Text>
        <Item rounded style={styles.textBox}>
          <Icon type='Ionicons' name='person' style={{ fontSize: 30 }} />
          <Input
            onChangeText={(text) => {
              setId(text);
            }}
            value={id}
          />
        </Item>
      </View>
    );
  };

我正在寻找一种输入人员 ID 的方法，然后将该状态保存到主函数，以便以后可以使用该变量。

我只是不知道该怎么做。

【问题讨论】：

标签： react-native expo native-base

【解决方案1】：

首先将IdScreen 组件从App 组件中取出（您应该将组件放在不同的文件中），然后如果您想将ID 从IdScreen 传递给App，您需要解除上状态。为此，您需要执行以下操作：

把这个const [id, setId] = useState('');只放在App组件中，然后把setId函数作为props传递给IdScreen组件，像这样：

<IdScreen id={id} setId={setId} />

然后在您的IdScreen 组件中，您可以使用setter 函数和值作为道具，如下所示：

props.id 和 props.setId

【讨论】：