[英]change Icon after clicking on it
我有一個看起來像這樣的組件:
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>
);
};
目前,我正在使用圓圈細圖標。 我想更改它,以便每次單擊圖標時,它都會更改為點圓圈圖標。 像單選按鈕。 但是,我不太確定該怎么做。
我考慮過使用三元運算符,但由於我正在映射我的字段,所以我不知道如何共同設置狀態。 也許使用索引? 我不想為每個字段創建一個單獨的 state。 這是一個類似的小吃演示:
https://snack.expo.io/toTSYc2fD
我希望能夠 select 多個/取消選擇選項。 我不想在所有字段上一起應用相同的規則。
注意:onPress function 也可以直接用在 Icon 上而不是 TouchableOpacity(雖然這不是首選)
使用三元聽起來對我來說是正確的方法。 你不能做這樣的事情嗎:
name={state ? 'dot-circle-o' : 'circle-thin'}
您還可以重構您的 function:
const myFunction = () => {
console.log('checking state', state);
setState(!state)
};
如果您有多個字段,那么有很多方法可以處理它。 您可以多次調用useState
,例如:
const [field1, setField1] = useState(false);
const [field2, setField2] = useState(false);
您還可以將所有字段存儲在同一個 state 中:
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>
);
並創建初始 state:
const initialState = {}
criteriaList.forEach(item => initialState[item] = false)
const [state, setState] = useState(initialState);
代碼如下所示。 您必須將所選項目的索引設置為 state 並使用它來選擇圖標。
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>
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.