有没有办法检查/取消选中一个圆形按钮作为我的例子？答案

【问题标题】：is there way to check/uncheck a circle button as my example?有没有办法检查/取消选中一个圆形按钮作为我的例子？
【发布时间】：2020-01-01 08:36:10
【问题描述】：

作为示例，如何选中/取消选中圆形按钮？这是我试图理解的例子

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


const NewPlaceScreen = props => {
    return (
        <View>
            <CheckBox
                iconRight
                right
                title='poshea'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                onPress={() => setChecked6(prev => !prev)}
            />
            <CheckBox
                iconRight
                right
                title='oshea'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={() => setChecked7(prev => !prev)}
            />
        </View>
    );

};

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

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

export default NewPlaceScreen

如果有一些线索告诉我理解的方式？上面的例子

【问题讨论】：

你混淆了checked 和onPress。 checked 是真还是假，需要引用一些状态。在此示例中，您需要创建两个状态变量checked6 和checked7，方法与我们在您的其他问题中讨论的方式相同[stackoverflow.com/questions/59550755/…。然后将这两个值分配给您的 checked 道具。 onPress 在这种情况下对于您的第一个复选框是正确的，一旦您在组件顶部添加状态

标签： javascript reactjs react-native react-hooks

【解决方案1】：

const NewPlaceScreen = props => {
  const [selectedCheckbox, setSelectedCheckbox] = useState(null);

  const handlePress = title => {
    selectedCheckbox === title ? setSelectedCheckbox(null) : setSelectedCheckbox(title)
  }

  ...

}

CheckBox 组件示例

  <CheckBox
    iconRight
    right
    title='oshea'
    checkedIcon='dot-circle-o'
    uncheckedIcon='circle-o'
    checked={selectedCheckbox === 'oshea'}
    onPress={() => handlePress('oshea'))}
  />

【讨论】：

如果我想在按下时只检查其中一个，例如：如果我按下复选图标 1 并且在我按下复选图标 2 之后，它让我检查 2 并清除其他。这意味着当您选择其中一个复选图标时，它会被选中，而另一个不会。