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

【问题标题】：handle onValueChange of Child Component in Parent Component in React native在 React Native 中处理父组件中子组件的 onValueChange
【发布时间】：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

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

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

非常感谢

【问题讨论】：

您可以使用 react-native-elements 为两个操作系统使用复选框
如果你不制作钩子！然后它的简单使用传递函数作为道具！到子组件来处理状态变化！这里我举个例子

标签： react-native components state reusability modularity

【解决方案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 的第一个答案所告诉的良好映射技术来完成它。

【讨论】：