从另一个组件重置一个组件的设置

Question

我有一个屏幕，在那里我正在使用一些文本和另一个名为FilterCriteriaList的组件，它有一些自定义按钮，当我们点击它们时，它们会改变颜色。

在我的主屏幕上，我想按下文本并重置FilterCriteriaList组件中的设置。这可以通过将所有options[index].checked设置为false来实现。然而，我不知道如何做到这一点，以便我们也可以再次选择按钮。

type FilterCriteriaListProps = {
deleteAll: boolean;
};
type CriteriaList = {
title: string;
checked: boolean;
};
const criteriaList = [
{ title: 'Nur Frauen', checked: false },
{ title: 'Freunde Zweiten Grades', checked: false },
{ title: 'Nichtraucherfahrzeug', checked: false },
{ title: 'Mit min. 4 Sternen bewertet', checked: false },
{ title: 'Automatische Zusage', checked: false },
];
export const FilterCriteriaList: React.FunctionComponent = () => {
const [selected, setSelected] = useState(criteriaList);
const handleChange = (index: number) => {
const options = [...selected];
options[index].checked = options[index].checked ? false : true;
setSelected(options);
};
return (
<View style={styles.container}>
<View style={styles.horizontalLine} />
{criteriaList.map((item: CriteriaList, index: number) => (
<View key={index}>
<View style={styles.criteriaRow}>
<Icon
name={item.checked ? 'dot-circle-o' : 'circle-thin'}
color="#31C283"
size={moderateScale(20)}
onPress={() => handleChange(index)}
/>
<Text style={styles.text}>{item.title}</Text>
</View>
<View style={styles.horizontalLine} />
</View>
))}
</View>
);
};

在主屏幕上：

const [deleteAll, setDeleteAll] = useState(false);
const deleteAllFilters = () => {
setDeleteAll(true);
};
<Text style={styles.deleteAllText} onPress={()=>{deleteAllFilters}}>DELETE ALL</Text>
...
<FilterCriteriaList/>

小吃博览会：https://snack.expo.io/dh3fk53zf

Answer 1

您可以将deleteAll值传递给您的子组件，并在子组件内部进行检查，如果deleteAll为true，则将criteriaList数组的所有元素的checked属性设置为true。