Question

我将Big组件调制成小块。在父组件中，我有很多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的方法，但是没有任何帮助。

请有人通过代码指导我如何解决此问题。？

非常感谢

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

Answer 2

我正在寻找的是您需要使用props在子组件中提供功能和状态值。

//父组件：

 <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此处第一个答案告诉您的良好映射技术来完成此操作。

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

2 个答案: