时间戳

首页 > 解决方案 > 单击一个子组件隐藏所有其他相同的子组件

reactjs - 单击一个子组件隐藏所有其他相同的子组件

问题描述

Touchable Opacity我使用and创建了一个自定义 Picker 组件Picker。单击可触摸的不透明度组件时，相关的 Picker 会切换。我在一个具有不同数据的父级中多次使用此组件。

Picker 的切换状态isPickerOpen在子组件中定义和使用，以降低父组件中状态管理的复杂性。我需要单击每个可触摸的不透明度来显示和隐藏其相关的选取器。

下面是子组件的代码：

function CustomPicker(props) {
    const {listItem, callbackParent} = props;
    const [isPickerOpen, setPickerOpen] = useState(false);

    const pickerListItem = listItems.map((item, i) => {
        return <Picker.Item key={i} label={item.text} value={item.value} />
    });


    return (
        <View>
           <TouchableOpacity style={styles.pickerButton}
                onPress={() => setPickerOpen(!isPickerOpen)}>
                <Text>Title</Text>
           </TouchableOpacity>

          {isPickerOpen && <Picker onValueChange={(value) => 
              callbackParent(value)}>
              {pickerListItem}
          </Picker>
        }
      </View>
   );
}

和父组件分数：

<SelectionPicker listItems={list1} onPickerSelection={handleChange} />
<SelectionPicker listItems={list2} onPickerSelection={handleChange} />
<SelectionPicker listItems={list3} onPickerSelection={handleChange} />

如何在点击可触摸不透明度时管理子组件的状态，隐藏所有其他打开的选择器，并只显示一个相关的选择器？

标签： reactjsreact-native

解决方案

您需要添加一个外部变量以对 Picker 组件进行另一种形式的验证，如下所示：

function CustomPicker(props) {
    const {
        listItems,
        onPickerClick,
        onPickerSelection,
        selectable = true,
        name,
    } = props;
    // 
    const [isPickerOpen, setPickerOpen] = useState(false);

    const pickerListItem = listItems.map((item, i) => {
        return <Picker.Item key={i} label={item.text} value={item.value} />
    });


    return (
        <View>
           <TouchableOpacity
                style={styles.pickerButton}
                onPress={() => {
                    // calling our picker selection function
                    onPickerClick(name)
                    setPickerOpen(!isPickerOpen)
                }}
            >
                <Text>Title</Text>
           </TouchableOpacity>

          {(isPickerOpen && selectable) && <Picker onValueChange={(value) => 
              onPickerSelection(value, name)}>
              {pickerListItem}
          </Picker>
        }
      </View>
   );
}

// Our selection handling function
handleSelection(name) {
    this.setState({
        currentPicker: name,
    })
}

// Adding unique names, a validation prop, and a selection method
<SelectionPicker
    name="someNameA"
    selectable={'someNameA' === currentPicker}
    onPickerClick={handleSelection}
    onPickerSelection={handleChange}
    listItems={list1}
/>
<SelectionPicker
    name="someNameB"
    selectable={'someNameB' === currentPicker}
    onPickerClick={handleSelection}
    onPickerSelection={handleChange}
    listItems={list2}
/>
<SelectionPicker
    name="someNameC"
    selectable={'someNameC' === currentPicker}
    onPickerClick={handleSelection}
    onPickerSelection={handleChange}
    listItems={list3}
/>

推荐阅读