如何在本机反应中将参数发送到父组件

Question

我有两个屏幕。屏幕 A 和屏幕 B，屏幕 A 是父组件，来自屏幕 A。我正在导航到屏幕 B。在屏幕 A 中，我有 3 个按钮。每次点击按钮屏幕 B 都会打开。并且屏幕 B 中有表格。在提交该表格时，我想要那个。屏幕 A 中的第一个按钮必须为绿色。按钮 2 也是如此。单击按钮 2 时，第二个表单将打开，然后在提交第二个表单时，第二个按钮将变为绿色。所以请帮忙。

这是我的屏幕A代码

import { TouchableOpacity, View } from "react-native";

export default class patientReadings extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("medicalinputs")}
        >
          button 1
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("medicalinputs")}
        >
          button 2
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("medicalinputs")}
        >
          button 3
        </TouchableOpacity>
      </View>
    );
  }
}

这是屏幕B

export default class medicalInput extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {};
  }

  validateInputs = (event) => {
    fetch("api", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },

      body: JSON.stringify([
        {
          data,
        },
      ]),
    })
      .then((returnValue) => returnValue.json())
      .then((response) => {
        console.log(response);

        this.props.navigation.navigate("patientReadings");
      });
  };

  render() {
    return (
      <TouchableOpacity
        onPress={() => this.validateInputs()}
      ></TouchableOpacity>
    );
  }
}

Answer 1

在 React JS 中，数据流向一个方向，从 Parent 到 Child。这有助于组件简单且可预测。 有一种方法可以做到这一点。 Check out this link

Answer 2

您好，请检查这种方式，您可以在路由参数中传递屏幕 A 的功能，并在提交表单时在屏幕 B 中调用它。

class ScreenA extends React.Component {
    handleCallback = (color) => {
        console.log('color from screen B', color);
    }

    navigateToScreenB = () => {
        this.props.navigation.navigate('ScreenB', {
            handleCallback: this.handleCallback // Pass function in params when navigate to screen B
        })
    }

    render() {
        ...
    }
}

class ScreenB extends React.Component {

    onSubmit = () => {
        // Called function that
        const { state } = this.props.navigation;
        const params = state.params || {};
        params.handleCallback('green'); // screen A callback function called that passed in route params
    }

    render() {
        ...
    }
}

但要学习 redux，因为这是在屏幕之间共享状态的合法方式。