在 React Native 中处理父组件中子组件的 onValueChange

Posted 2023-02-23

【中文标题】在 React Native 中处理父组件中子组件的 onValueChange

【英文标题】：handle onValueChange of Child Component in Parent Component in React native

【发布时间】：2020-01-05 13:26:34

【问题描述】：

我正在将我的大组件调制成小块。在父组件中，我有很多 Switch 和 CheckbBox 组件。

在这里

ParentComponent.js

<View style=styles.sliderContainer>
                            <Text style=styles.sliderLabel>Diettags:</Text>
                            <CheckBoxComponent label='Sugarfree' availableItems=13/>
                            <CheckBoxComponent label='Youth' availableItems=11/>
                            <CheckBoxComponent label='Metabolites' availableItems=10/>
                            <CheckBoxComponent label='Fodmap' availableItems=7/>
                        </View>

CheckBoxCompoenent.js

import React, Component from 'react'
import Text, View, CheckBox, Switch, Platform,StyleSheet from "react-native";
import PropTypes from 'prop-types'


class CheckBoxComponent extends Component 

    state=
        checked: true
    ;

    render() 
        const  label,handleToggle,availableItems = this.props;
        const checked = this.state;
        return (
            Platform.OS === 'ios' ?
                <View style=styles.mainContainer>
                    <Text style=styles.label>`$label($availableItems)`</Text>
                    <Switch value=checked/>
                </View> :
                <View style=styles.mainContainer>
                    <Text style=styles.label>`$label($availableItems)`</Text>
                    <CheckBox value=checked />
                </View>
        )


    


const styles = StyleSheet.create(
   mainContainer: 
       flex: 1,
       justifyContent: 'space-between',
       alignItems: 'center',
       flexDirection: 'row',
       marginLeft: 20,
       marginRight: 20,
       marginTop: 10
   ,
   label: 
       fontSize: 16,
   
);

CheckBoxComponent.proptype = 
    label: PropTypes.string.isRequired,
    handleToggle: PropTypes.func.isRequired,
    availableItems: PropTypes.string
;

export default CheckBoxComponent

现在我想要什么

我想在我的父组件中处理开关和复选框的onValueChange

我已经尝试了 *** 上所有可用的方法，但没有任何帮助。

请有人指导我通过代码如何解决这个问题。 ?

非常感谢

【问题讨论】：

您可以使用 react-native-elements 为两个操作系统使用复选框

如果你不制作钩子！然后它的简单使用传递函数作为道具！到子组件来处理状态变化！这里我举个例子

【参考方案1】：

在这种情况下，我建议使用地图和数组来呈现复选框。它会变成这样：

constructor(props) 
    super(props)
    this.state=
    checkBoxesArray:[label: "Sugarfree",avaiableItems:13, label: "Youth",avaiableItems:11, label: "Metabolites",avaiableItems:10, label: "Fodmap",avaiableItems:7]
    

然后在你的渲染中：

<View style=styles.sliderContainer>
    <Text style=styles.sliderLabel>Diettags:</Text>
    this.checkBoxesArray.map((item, index) => <CheckBoxComponent label='item.label' availableItems=item.avaiableItems onValueChange=this.onValueChange checkBoxIndex=index/>
)
</View>

然后，在子级中，当您需要调用 onValueChange 时，您只需调用从父级传递的函数即可：

onPress=()=> this.props.onValueChange(this.props.checkBoxIndex)

最后，在您的父母中，您将需要一个函数来处理它，例如：

onValueChange= (index) =>
//do what you need

【参考方案2】：

我在看的是你需要在子组件中提供函数和使用道具的状态值。

//父组件：

 <View style=styles.sliderContainer>
                    <Text style=styles.sliderLabel>Diettags:</Text>
                    <CheckBoxComponent label='Sugarfree' availableItems=13 checked=this.state.checked onValueChange=this.handleValueChange />
                    <CheckBoxComponent label='Youth' availableItems=11/>
                    <CheckBoxComponent label='Metabolites' availableItems=10/>
                    <CheckBoxComponent label='Fodmap' availableItems=7/>
                </View>

子组件这样做：

 const  label,handleToggle,availableItems,checked = this.props;
    return (
        Platform.OS === 'ios' ?
            <View style=styles.mainContainer>
                <Text style=styles.label>`$label` <Text style=color: 'red'>(availableItems)</Text></Text>
                <Switch value=checked onValueChange=(text) => this.props.onValueChange(text)/>
            </View> :
            <View style=styles.mainContainer>
                <Text style=styles.label>`$label($availableItems)`</Text>
                <CheckBox value=checked />
            </View>
    )

以上内容将助您一臂之力，剩下的就靠您了！您可以使用@auticcat 的第一个答案所告诉的良好映射技术来完成它。