javascript - 有没有办法检查和取消检查我的示例中的 "check-boxes"？

Question

这是我的示例，我尝试选中和取消选中“复选框”，但我感到困惑，如果有人告诉我应该如何完成，我会很高兴。

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { CheckBox } from 'react-native-elements';

const NewPlaceScreen = props => {
 const [checked, setChecked] = useState(false);


 return (
     <View>
         <CheckBox
             iconRight
             right
             title="apple"
             checked={checked}
             onPress={() => setChecked(true)}
         />
         <CheckBox
             iconRight
             right
             title="kiwi"
             checked={checked}
             onPress={() => setChecked(true)}
         />
     </View>
 );

};

NewPlaceScreen.navigationOptions = {
 headerTitle: 'viewsqq'
};

const styles = StyleSheet.create({
 TextStyle: {
     fontWeight: 'bold',
     color: 'grey'

 }
});

export default NewPlaceScreen

这就是我上面的例子

Answer 1

当按下时，您需要将它们设置为与之前状态相反的状态。您可以使用 setState 回调来执行此操作:

onPress={() => setChecked(prev => !prev)}

目前您的复选框都使用相同的状态变量 checked 因此它们将保持同步 - 更改一个将更改另一个。如果这不是您想要的，您应该为每个复选框创建一个单独的状态变量。

---

更新:

要独立处理每个复选框，您需要为每个复选框创建状态:

const [isAppleChecked, setIsAppleChecked] = useState(false)
const [isKiwiChecked, setIsKiwiChecked] = useState(false)

return (
  <View>
    <CheckBox
      iconRight
      right
      title="apple"
      checked={isAppleChecked}
      onPress={() => setIsAppleChecked(prev => !prev)}
    />
    <CheckBox
      iconRight
      right
      title="kiwi"
      checked={isKiwiChecked}
      onPress={() => setIsKiwiChecked(prev => !prev)}
    />
  </View>
)