將數據和功能傳遞給子組件，而不是呈現

Question

將數據從父組件傳遞到子AccountsDropDown時遇到問題。 按照下面的代碼，我可以將depositAcct參數傳遞給子級，但不能傳遞所選的值和onValueChnage方法。

因此，按照當前代碼，這是面臨的兩個問題

• 所選值未呈現
• OnValueChange事件不起作用，其未設置父狀態。

這是我的父組件

import React, { Component } from "react";   
const transferType = ["Transfer", "Pay Loan"];

export default class a2aTransfer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: "start",
            selectedTransferType: transferType[0],
            fromAcct: "",
            toAcct: "",
            amt: "",
            memo: ""
        };
    }

    componentDidMount() {
        this.setState({ fromAcct: this.context.depositAcct[0].desc });
        this.setState({ toAcct: this.context.loanAcct[0].desc });
    }
    render() {
        TransferForm = () => {
            return (
                <Container>
                    <Content>
                        <Form>

                            <View style={styles.item}>
                                <Text note>From Account</Text>

                                <AccountsDropDown
                                    selectedValue={this.state.fromAcct}
                                    depositAcct={this.context.depositAcct}
                                    navigation={this.props.navigation}
                                    onValueChange={itemValue => this.setState({ fromAcct: itemValue })}
                                />
                            </View>

                        </Form>
                    </Content>
                </Container>
            );
        };


        if (this.state.mode == "start") {
            return <TransferForm />;
        }
        return <TransferConfirm />;
    }
}
a2aTransfer.contextType = MyContext;

這是我的孩子

  import React, { Component } from "react";
import { Picker, Icon } from "native-base";
import { Dimensions, Platform } from "react-native";
export default class accountsDropDown extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Picker
                selectedValue={this.props.selectedValue}
                mode="dropdown"
                iosHeader="Choose To Account"
                style={{ width: Platform.OS === "ios" ? undefined : Dimensions.get("window").width }}
                iosIcon={<Icon name="arrow-down" />}
                onValueChange={() => this.props.onValueChange}
            >
                {typeof this.props.depositAcct != "undefined" &&
                    this.props.depositAcct.map((acct, idx) => {
                        return <Picker.Item key={idx} label={acct.desc} value={acct.masked} />;
                    })}

            </Picker>
        );
    }
}

Answer 1

onValueChange是一個函數，因此您需要在子組件中使用以下值調用它：

    <Picker
        selectedValue={this.props.selectedValue}
        mode="dropdown"
        iosHeader="Choose To Account"
        style={{ width: Platform.OS === "ios" ? undefined : Dimensions.get("window").width }}
        iosIcon={<Icon name="arrow-down" />}
        onValueChange={(value) => this.props.onValueChange(value)}

如果您不需要轉換value則直接傳遞函數：

onValueChange={this.props.onValueChange}

Answer 2

您已經編寫了確定的代碼，只需檢查是否從上下文中獲取數據即可。

在渲染方法中控制台您的selectedValue，並檢查是否從上下文獲取數據

render() {
    console.log(this.props.selectedValue);
    return (
        <Picker
            selectedValue={this.props.selectedValue}
            mode="dropdown"
            iosHeader="Choose To Account"
            style={{ width: Platform.OS === "ios" ? undefined : Dimensions.get("window").width }}
            iosIcon={<Icon name="arrow-down" />}
            onValueChange={() => this.props.onValueChange}
        >
            {typeof this.props.depositAcct != "undefined" &&
                this.props.depositAcct.map((acct, idx) => {
                    return <Picker.Item key={idx} label={acct.desc} value={acct.masked} />;
                })}

        </Picker>
    );
}