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

Question

我正在将我的大组件调整为小块。在父组件中，我有很多 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

现在我想要什么

I want to handle onValueChange of Switch and Checkbox in my Parent Component

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

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

非常感谢

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>

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

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

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

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

handle onValueChange of Child Component in Parent Component in React native

react-native

components

state

reusability

modularity