如何在本机反应中有多个独立开关？

Question

我在一个活动中有 5 个开关都可以正常工作。但问题是所有这些都是相互关联的，即如果打开一个开关，所有开关都会打开。

如何让它们独立开关而不影响其他开关动作？

我的代码 -

state = {
    colorTrueSwitchIsOn: true,
    colorFalseSwitchIsOn: false,
};

class Notification extends Component {

    static navigationOptions = ({
        navigation
    }) => ({
        header: props => < Header
        navigation = {
            navigation
        }
        title = {
            'NOTIFICATION SETTINGS'
        }
        toggleDrawer /
        >
    })

    constructor(props) {
        super(props);
        this.state = {

            SwitchOnValueHolder: false

        };
    }



    ShowAlert = (value) => {

        this.setState({

            SwitchOnValueHolder: value
        })

        if (value == true) {

            //Perform any task here which you want to execute on Switch ON event.
            Toast.show('Switch is On');
        }
        else {

            //Perform any task here which you want to execute on Switch OFF event.
            Toast.show('Switch is On');
        }

    }

    render() {
        return ( <
            View style = {
                styles.container
            } >

            <
            ScrollView >



            <
            View style = {
                {
                    flex: 1,
                    flexDirection: 'row'
                }
            } >




            <
            View style = {
                {
                    width: '25%',
                    height: 50,
                }
            } >

            <
            Switch onValueChange = {
                (value) => this.setState({
                    colorTrueSwitchIsOn: value
                })
            }
            onTintColor = "#FFE2C6"
            thumbTintColor = "#FF952E"
            tintColor = "#D7D0C9"
            value = {
                this.state.colorTrueSwitchIsOn
            }
            />

            <
            /View>

            <
            /View>


            <
            View style = {
                {
                    flex: 1,
                    flexDirection: 'row'
                }
            } >




            <
            View style = {
                {
                    width: '25%',
                    height: 50,
                }
            } >

            <
            Switch onValueChange = {
                (value) => this.setState({
                    colorTrueSwitchIsOn: value
                })
            }
            onTintColor = "#FFE2C6"
            thumbTintColor = "#FF952E"
            tintColor = "#D7D0C9"
            value = {
                this.state.colorTrueSwitchIsOn
            }
            />

            <
            /View>

            <
            /View>


            <
            View style = {
                {
                    flex: 1,
                    flexDirection: 'row',
                    marginBottom: 20
                }
            } >




            <
            View style = {
                {
                    width: '25%',
                    height: 50,
                    top: 10
                }
            } >

            <
            Switch onValueChange = {
                (value) => this.setState({
                    colorTrueSwitchIsOn: value
                })
            }
            onTintColor = "#FFE2C6"
            thumbTintColor = "#FF952E"
            tintColor = "#D7D0C9"
            value = {
                this.state.colorTrueSwitchIsOn
            }
            />

            <
            /View>

            <
            /View>


            <
            View style = {
                {
                    flex: 1,
                    flexDirection: 'row'
                }
            } >




            <
            View style = {
                {
                    width: '25%',
                    height: 50,
                }
            } >

            <
            Switch onValueChange = {
                (value) => this.setState({
                    colorTrueSwitchIsOn: value
                })
            }
            onTintColor = "#FFE2C6"
            thumbTintColor = "#FF952E"
            tintColor = "#D7D0C9"
            value = {
                this.state.colorTrueSwitchIsOn
            }
            />

            <
            /View>

            <
            /View>


            <
            View style = {
                {
                    flex: 1,
                    flexDirection: 'row'
                }
            } >




            <
            View style = {
                {
                    width: '25%',
                    height: 50,
                }
            } >

            <
            Switch onValueChange = {
                (value) => this.setState({
                    colorTrueSwitchIsOn: value
                })
            }
            onTintColor = "#FFE2C6"
            thumbTintColor = "#FF952E"
            tintColor = "#D7D0C9"
            value = {
                this.state.colorTrueSwitchIsOn
            }
            />

            <
            /View>

            <
            /View>

            <
            /View>

            <
            /ScrollView>

            <
            /View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignContent: 'center',
        backgroundColor: "#fff",
    },

    layout: {
        marginTop: 15,
        marginBottom: 5,
        marginLeft: 15,
        marginRight: 10,
    }

})

export default Notification 

我该如何解决这个错误？ 我尝试将其调用为不起作用的不同开关！

Answer 1

您已将所有开关值链接到同一个状态变量； colorTrueSwitchIsOn。而且所有的 onValueChange 方法都会改变同一个变量。您是否有特定的原因要以这种方式进行操作？因为这就是问题所在。

每个开关的value 和onValueChange 方法都应该与不同的状态变量相关联。

在您的状态中有单独的值：

this.state = {
    switchVal1: true,
    switchVal2: false
};

然后将您的开关分别链接到它们的变量：

<Switch onValueChange = {(value) => this.setState({switchVal1: value})}
    value = {this.state.switchVal1}/>


<Switch onValueChange = {(value) => this.setState({switchVal2: value})}
    value = {this.state.switchVal2}/>