Question

因此,我在 android 应用程序中有一个 react-native 屏幕,用于报告大学中的故障设备,并且我的手风琴菜单有一个奇怪的问题。我将其用作存储的损坏设备类型的选项列表,然后将其发送到数据库。经过测试,我发现 acordion 菜单不会关闭,即使我编辑该函数以更改应跟踪菜单是否应打开的状态。

const [typeOfEquip, setTypeOfEquip] = useState('');
const [expanded, setExpanded] = React.useState(true);
const chooseType= (typ) =>{
setTypeOfEquip(typ);
handlePress();

}

const handlePress = () => setExpanded(!expanded);
<List.AccordionGroup>
          <List.Accordion
            title="Type of equipment"
            expanded={expanded}
            onPress={handlePress}
            id="1">
            <List.Item
              title="Svetla"
              onPress={() => {
                chooseType('Svetla');
              }}
            />
            <List.Item
              title="Stoličky"
              onPress={() => {
                chooseType('Stoličky');
              }}
            />
          </List.Accordion>

0

Answer 1

我猜你有这个问题是因为默认行为。在List.Accordion的onPress中，您正在调用handlePress()和List.Accordion的子代，即List.Item调用chooseType函数。chooseType也调用handlePress函数。尝试添加到

const [typeOfEquip, setTypeOfEquip] = useState('');
const [expanded, setExpanded] = React.useState(true);
const chooseType= (e, typ) =>{
  e.preventDefault();
  setTypeOfEquip(typ);
  handlePress(); 
}
const handlePress = (e) => {
  e.preventDefault();
  setExpanded(!expanded);
}
<List.AccordionGroup>
          <List.Accordion
            title="Type of equipment"
            expanded={expanded}
            onPress={handlePress}
            id="1">
            <List.Item
              title="Svetla"
              onPress={(e) => {
                chooseType(e, 'Svetla');
              }}
            />
            <List.Item
              title="Stoličky"
              onPress={(e) => {
                chooseType(e, 'Stoličky');
              }}
            />
          </List.Accordion>