Javascript 将数据和函数传递给子组件，而不是渲染

将数据从父组件传递到子组件时出现问题AccountsDropDown。根据下面的代码，我可以将depositAcct参数传递给子级，但不能传递所选的值和onValueChnange方法

因此，根据当前代码，这些是我面临的两个问题

• 选定的值不在渲染中
• 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>
        );
    }
}

import React，{Component}来自“React”；
const transferType=[“转账”、“支付贷款”]；
导出默认类a2aTransfer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
模式：“开始”，
selectedTransferType:transferType[0]，
fromAcct:“”，
toAcct:“，
金额：“，
备忘录：“”
};
}
componentDidMount（）{
this.setState（{fromAcct:this.context.DepositoAcct[0].desc}）；
this.setState（{toAcct:this.context.loanAcct[0].desc}）；
}
render（）{
TransferForm=（）=>{
返回(
从帐户
this.setState（{fromAcct:itemValue}）}
/>
);
};
if（this.state.mode==“start”）{
返回；
}
返回；
}
}
a2aTransfer.contextType=MyContext；

这是我的子组件

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

import React，{Component}来自“React”；
从“本机基”导入{Picker，Icon}；
从“react native”导入{Dimensions，Platform}；
导出默认类AccountsDown扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.onValueChange}
>
{typeof this.props.DepositoAcct！=“未定义”&&
此.props.depositAcct.map（（帐户，idx）=>{
返回；
})}
);
}
}

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

---

您已经编写了ok代码，只需检查您是否从上下文中获取数据

在render方法中控制台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>
    );
}

render（）{
console.log（this.props.selectedValue）；
返回(
this.props.onValueChange}
>
{typeof this.props.DepositoAcct！=“未定义”&&
此.props.depositAcct.map（（帐户，idx）=>{
返回；
})}
);
}

Davin Tryon:它成功了，谢谢，你知道为什么选择的值没有首先填充吗？我只能猜测

“

被视为错误。所以，初始值没有选择任何内容。