сбросить настройки одного компонента из другого - PullRequest
Новая
       77

сбросить настройки одного компонента из другого

0 голосов
/ 04 августа 2020

У меня есть экран, на котором я использую текст и другой компонент под названием FilterCriteriaList, в котором есть несколько настраиваемых кнопок, которые меняют свой цвет, когда мы нажимаем на них. text и сбросьте настройки в компоненте 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/>

Snack Expo: https://snack.expo.io/dh3fk53zf

1 Ответ

0 голосов
/ 04 августа 2020

Вы можете передать значение deleteAll своему дочернему компоненту и проверить внутри дочернего компонента, если deleteAll истинно, тогда установите для свойства checked всех элементов массива критериевList значение true.

...