有没有办法从我的例子中检查和取消选中“复选框”？

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>
)

Answer 2

您需要为每个框设置单独的状态，否则它们将始终显示相同的内容。您需要将新状态设置为与旧状态相反：

const NewPlaceScreen = props => {
  const [appleChecked, setAppleChecked] = useState(false);
  const [kiwiChecked, setKiwiChecked] = useState(false);

  return (
    <View>
      <CheckBox
        iconRight
        right
        title='apple'
        checked={appleChecked} // use the apple-specific state
        onPress={() => setAppleChecked(prevState => !prevState)} // use the new apple state function
      />
      <CheckBox
        iconRight
        right
        title='kiwi'
        checked={kiwiChecked} // use the new kiwi state
        onPress={() => setKiwiChecked(prevState => !prevState)} // use the new kiwi function
      />
    </View>
  );
};