单击图标后更改图标

Question

我有一个看起来像这样的组件：

const criteriaList = [
'Nur Frauen',
'Freunde Zweiten Grades',
];
export const FilterCriteriaList: React.FunctionComponent = () => {
const [state, setState] = useState(false);
useEffect(() => {
console.log('state is,', state);
});
const myFunction = () => {
console.log('checking state', state);
if (state == false) {
setState(true);
} else {
setState(false);
}
};
return (
<View style={styles.container}>
<View style={styles.horizontalLine} />
{criteriaList.map((item: string, index: number) => (
<View key={index}>
<View style={styles.criteriaRow}>
<TouchableOpacity 
onPress={() => {
myFunction();
}}>
<Icon
name="circle-thin"
color="#31C283"
size={moderateScale(20)}
/>
</TouchableOpacity>
<Text style={styles.text}>{item}</Text>
</View>

<View style={styles.horizontalLine} />
</View>
))}
</View>
);
};

目前，我正在使用圆形瘦图标。我想更改它，这样每当我点击一个图标时，它就会变为圆点图标。就像单选按钮。然而，我不太确定如何做到这一点

我曾想过使用三元运算符，但由于我正在映射我的字段，我想知道如何集体设置状态。也许用索引？我不想为每个字段创建一个单独的状态。这里有一个类似的零食演示：

https://snack.expo.io/toTSYc2fD

我希望能够选择多个/取消选择选项。我不想在所有字段上同时应用相同的规则。

注意：onPress功能也可以直接在图标上使用，而不是TouchableOpacity(尽管不是首选(

Answer 1

对我来说，使用三进制听起来是正确的方法。你能不做这样的事情吗：

name={state ? 'dot-circle-o' : 'circle-thin'}

你也可以重构你的函数：

const myFunction = () => {
console.log('checking state', state);
setState(!state)
};

如果你有多个字段，那么有很多方法可以处理它。你可以多次调用useState，例如：

const [field1, setField1] = useState(false);
const [field2, setField2] = useState(false);

您也可以将所有字段存储在同一状态：

const [state, setState] = useState({field1: false, field2: false});
...
const myFunction = (fieldName) => {
console.log('checking state', state);
setState({...state, [fieldName]: !state[fieldName]})
};

我猜你会使用CCD_ 2作为"；fieldName？在这种情况下：

return (
<View style={styles.container}>
<View style={styles.horizontalLine} />
{criteriaList.map((item: string, index: number) => (
<View key={index}>
<View style={styles.criteriaRow}>
<TouchableOpacity 
onPress={() => {
myFunction(item);
}}>
<Icon
name={state[item] ? 'dot-circle-o' : 'circle-thin'}
color="#31C283"
size={moderateScale(20)}
/>
</TouchableOpacity>
<Text style={styles.text}>{item}</Text>
</View>

<View style={styles.horizontalLine} />
</View>
))}
</View>
);

并创建初始状态：

const initialState = {}
criteriaList.forEach(item => initialState[item] = false)
const [state, setState] = useState(initialState);

Answer 2

代码如下所示。您必须将所选项目的索引设置为状态，并使用它来选择图标。

const criteriaList = [
{title:'My List',checked:false},
{title:'Friends listt',checked:false},
{title:'Not Good',checked:false},
{title:'Sweet and sour',checked:false},
{title:'Automatic',checked:false},
];
export const FilterCriteriaList: React.FunctionComponent = () => {
const [state, setState] = useState(criteriaList);
useEffect(() => {
console.log('state is,', state);
});
const myFunction = (index) => {
console.log('checking state', state);
const arr=[...state];

arr[index].checked=arr[index].checked?false:true;
setState(arr);

};
return (
<View style={styles.container}>
<View style={styles.horizontalLine} />
{criteriaList.map((item: Any,index:number) => (
<View key={item}>
<View key={item} style={styles.criteriaRow}>
<Icon 
style={styles.icon}
name={item.checked?"circle":"circle-thin"}
color="#31C283"
size={moderateScale(20)}
onPress= {()=>myFunction(index)}
/>
<Text style={styles.text}>{item.title}</Text>
</View>

<View style={styles.horizontalLine} />
</View>
))}
</View>
);
};