英文:
How to prevent multiple click on Switch component from react native
问题
我在React Native的Switch组件中遇到了问题，问题是在API完成之前，用户能够多次点击Switch组件。那么，如何防止用户多次点击Switch组件？
我使用的是类组件。
<Switch
trackColor={{ false: MONOCHROME_5, true: POLYCHROME_1 }}
ios_backgroundColor={MONOCHROME_5}
onValueChange={() => {
// 进行某些操作
}}
onChange={(e) => console.log(e)}
value={this.state.enabled}
/>
已经尝试使用状态（state）来使用onTouchStart属性禁用组件，但仍然能够多次点击。
英文:
I have an issue with Switch component from react native, the issue is user able to multiple click on switch component before API completed. So, how to prevent user to multiple click on switch component?
I'm using class component btw.
<Switch
trackColor={{ false: MONOCHROME_5, true: POLYCHROME_1 }}
ios_backgroundColor={MONOCHROME_5}
onValueChange={() => {
//do something
}}
onChange={(e) => console.log(e)}
value={this.state.enabled}
/>
Already try to use state to disable the component with onTouchStart props, but it was still able to multiple click
答案1
得分: 2
使用 useState 钩子来维护一个布尔值的状态，该状态将设置开关的 disabled 属性。然后，您可以在 onChange 或 onValueChange 函数中切换此布尔值以禁用开关，然后在 API 调用完成后重新启用。
const [switchDisabled, setSwitchDisabled] = useState(false)
<Switch
trackColor={{ false: MONOCHROME_5, true: POLYCHROME_1 }}
ios_backgroundColor={MONOCHROME_5}
onValueChange={() => {
setSwitchDisabled(true)
// 等待 API 调用
setSwitchDisabled(false)
}}
onChange={(e) => console.log(e)}
value={this.state.enabled}
disabled={switchDisabled}
/>
英文:
Use a useState hook to hold the state of a boolean value which will set the switch's disabled prop. You can then toggle this boolean in your onChange or onValueChange function to disable the switch, and then re-enable once the API call has completed.
const [switchDisabled, setSwitchDisabled] = useState(false)
<Switch
trackColor={{ false: MONOCHROME_5, true: POLYCHROME_1 }}
ios_backgroundColor={MONOCHROME_5}
onValueChange={() => {
setSwitchDisabled(true)
//await API Call
setSwitchDisabled(false)
}}
onChange={(e) => console.log(e)}
value={this.state.enabled}
disabled={switchDisabled}
/>
答案2
得分: 0
我从我的合作伙伴那里得到了答案
这是方法
<Switch
disabled={this.state.isDisableToggle}
onResponderStart={() => {
if (Platform.OS === 'ios') { // 处理防止iOS激活时的双击
this.setState({ isDisableToggle: true })
}
}}
onChange={() => {
if (Platform.OS === 'android') { // 处理防止Android激活时的双击
this.setState({ isDisableToggle: true })
}
}}
onValueChange={() => {
setTimeout(() => { // 处理防止点击切换被禁用
this.setState({ isDisableToggle: false });
}, 2000);
// 做一些事情
}}
value={this.state.isEnabledSwitch}
/>
这与@Stitt的概念几乎相同，但我们发现了如何防止iOS和Android设备的双击。
英文:
I got the answer from my partner
here is the way
<Switch
disabled={this.state.isDisableToggle}
onResponderStart={() => {
if (Platform.OS === 'ios') { // handle prevent click toggle for ios activated
this.setState({ isDisableToggle: true })
}
}}
onChange={() => {
if (Platform.OS === 'android') { // handle prevent click toggle android activated
this.setState({ isDisableToggle: true })
}
}}
onValueChange={() => {
setTimeout(() => { // handle prevent click toggle disabled
this.setState({ isDisableToggle: false });
}, 2000);
// do something
}}
value={this.state.isEnabledSwitch}
/>
it was almost same with concept from @Stitt, but we found out how to prevent double click from iOS and android device
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论