我試圖在同一頁面上有多個開關，我成功了，但問題是當我點擊一個開關時，它會修改所有其他開關。
這是我的代碼
const Setting =() => {
const [switchValue, setSwitchValue] = useState(false);
const toggleSwitch = (value, nb) => {
setSwitchValue(value);
};
return (
<View>
<View style={styles.Container}>
<Text style={styles.Title}>Change Profil Setting</Text>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>Over 18:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>AutoPlay:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>FlexDirecttion:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
</View>
)
}
uj5u.com熱心網友回復：
const Setting =() => {
const [switchValue, setSwitchValue] = useState(false);
const [switch2Value, setSwitch2Value] = useState(false);
const [switch3Value, setSwitch3Value] = useState(false);
const toggleSwitch = (value, nb) => {
setSwitchValue(value);
};
const toggle2Switch = (value, nb) => {
setSwitch2Value(value);
};
const toggle3Switch = (value, nb) => {
setSwitch3Value(value);
};
return (
<View>
<View style={styles.Container}>
<Text style={styles.Title}>Change Profil Setting</Text>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>Over 18:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>AutoPlay:</Text>
<Switch
style={{left: 50}}
onValueChange={toggle2Switch}
value={switch2Value}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>FlexDirecttion:</Text>
<Switch
style={{left: 50}}
onValueChange={toggle3Switch}
value={switch3Value}
/>
</View>
</View>
)
}
這可以被視為一種解決方法。我的建議是將 Switch 組件包裝在另一個組件中，并通過在該組件中合并狀態管理將其匯入到任何您想要的位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401166.html
標籤：javascript 反应原生
上一篇：反應中的影像點擊