React Native多個開關

Question

在React-Native上，我試圖創建一個包含多個開關組件的屏幕，並且可以一次只選擇一個。當組件加載時，只有第一個開關打開。如果你點擊它，它會關閉，但如果你打開另一個，所有其他的都會關閉。

我不知道我在這裏有正確的方法，因爲我很困惑如何使用組件狀態來做到這一點。在JS中，我會做一些類似於將所有開關關閉的功能，但是打開點擊的開關，但我不明白如何使用狀態。

在此先感謝

import React from 'react' 
import { ScrollView, Text, View, Switch } from 'react-native' 

class switchScreen extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     trueSwitchIsOn: true, 
     falseSwitchIsOn: false 
    } 
    } 

    switch = (value) => { 
    this.setState({ falseSwitchIsOn: value, trueSwitchIsOn: !value }) 
    } 

    render() { 
    return (
     <View> 
     <Switch 
      onValueChange={this.switch} 
      value={this.state.trueSwitchIsOn} 
     /> 
     <Switch 
      onValueChange={this.switch} 
      value={this.state.falseSwitchIsOn} 
     /> 
     <Switch 
      onValueChange={this.switch} 
      value={this.state.falseSwitchIsOn} 
     /> 
     </View> 
    ) 
    } 
} 

Answer 1

我相信一個更優化的解決方案將減少狀態的數量，和不一致的數據的可能性。使用一個狀態變量來跟蹤哪個開關處於活動狀態（如果有的話）可以很容易地解決您的問題。

import React from 'react' 
import { ScrollView, Text, View, Switch } from 'react-native' 

class switchScreen extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     activeSwitch: null, 
    } 
    } 

    // A simple toggle method that takes a switch number 
    // And toggles it between on/off 
    toggleSwitch = (switchNumber) => { 
    this.setState({ 
     activeSwitch: switchNumber === this.state.activeSwitch ? null : switchNumber 
    }) 
    }; 

    // 
    switchOne = (value) => { this.toggleSwitch(1) }; 
    switchTwo = (value) => { this.toggleSwitch(2) }; 
    switchThree = (value) => { this.toggleSwitch(3) }; 

    render() { 
    return (
     <View> 
     <Switch 
      onValueChange={this.switchOne} 
      value={this.state.activeSwitch === 1} 
     /> 
     <Switch 
      onValueChange={this.switchTwo} 
      value={this.state.activeSwitch === 2} 
     /> 
     <Switch 
      onValueChange={this.switchThree} 
      value={this.state.activeSwitch === 3} 
     /> 
     </View> 
    ) 
    } 
} 

Answer 2

import React from 'react' 
    import { ScrollView, Text, View, Switch } from 'react-native' 

    class switchScreen extends React.Component { 
     constructor (props) { 
     super(props) 
     this.state = { 
      switchone:false, 
      switchtwo:false, 
      switchthree:false, 

     } 
     } 

     switchOne = (value) => { 
     this.setState({ switchone: !value, 
     switchtwo:false,switchthree:false, 
     }) 
     } 
switchTwo = (value) => { 
     this.setState({ switchtwo: !value, 
     switchone:false,switchthree:false, 
     }) 
     } 
switchThree = (value) => { 
     this.setState({ switchtree: !value, 
     switchone:false,switchtwo:false, 
     }) 
     } 

     render() { 
     return (
      <View> 
      <Switch 
       onValueChange={this.switchOne} 
       value={this.state.switchone} 
      /> 
      <Switch 
       onValueChange={this.switchTwo} 
       value={this.state.switchtwo} 
      /> 
      <Switch 
       onValueChange={this.switchThree} 
       value={this.state.switchthree} 
      /> 
      </View> 
     ) 
     } 
    }