单击图标后更改图标
单击图标后更改图标
提问于 2020-08-04 16:30:12
我有一个看起来像这样的组件：
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>
);
};目前，我使用的是圆形-细小图标。我想要更改它，以便每次我单击一个图标时，它都会变成点-圈-o图标。就像单选按钮一样。然而，我不太确定如何做到这一点。
我想过使用三元运算符，但由于我是在映射字段Idk，因此如何对其进行setStates。也许可以使用索引？我不想为每个字段创建单独的状态。下面是一个类似的零食演示：
https://snack.expo.io/toTSYc2fD
我希望能够选择多个/取消选择选项。我不想将相同的规则一起应用于所有字段。
注意: onPress函数也可以直接在图标上使用，而不是在TouchableOpacity上使用(尽管这不是首选)
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-04 16:36:22
代码应该类似于下面的内容。您必须将所选项目的索引设置为状态，并使用它来选择图标。
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>
);
};Stack Overflow用户
发布于 2020-08-04 16:33:11
对我来说，使用三元组听起来是正确的方法。你能不能不这样做：
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]})
};我猜您会使用item作为"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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63242982
复制相关文章
相似问题
腾讯云开发者
