Tutaj absolutny natywny noob. Mam problem z aktualizacją „wybranej pozycji”. Używam tego jako fikcyjnych danych:

this.state = {
  branch: '',
  completedBy: '',
  reportedTo: '',
  branchData: {
    text: 'Branch',
    value: '',
    options: [
      {code: '0001', name: 'TEST 1', key: 1},
      {code: '0002', name: 'TEST 2', key: 2},
      {code: '0003', name: 'TEST 3', key: 3},
    ]
  }
};

Następnie utworzyłem osobny plik dla mojego komponentu rozwijanego, wygląda to tak:

super(props);
    this.state = {
        modalVisible: false
    };
  }
  
  render() {
    return (
        <>
        <TouchableWithoutFeedback style={styles.refreshBtn} onPress={() => this.setState({ modalVisible: true })} >
            <View style={styles.container} >
                {
                    this.props.data.value ? 
                        <Text style={styles.selectedText} >{this.props.data.value}</Text>
                        :
                        <Text style={styles.placeholderText} >{this.props.data.text}</Text>
                }
                <MaterialCommunityIcons name={'chevron-down'} size={30} color={Colors.grey} />
            </View>
        </TouchableWithoutFeedback>

        <Modal 
          animationType="slide"
          visible={this.state.modalVisible}
          onRequestClose={() => {
            this.setState({ modalVisible: false })
           }}
        >
            <TouchableOpacity onPress={() => this.setState({ modalVisible: false })} style={{ flexDirection: "row", justifyContent: "flex-end", margin: 10, paddingLeft: 50}}>
                <Ionicons name="md-close" size={30} />
            </TouchableOpacity>
            <FlatList 
            data={this.props.data.options}
            keyExtractor={(item) => item.key.toString()}
            renderItem={({ item }) => (
                <TouchableOpacity style={styles.itemContainer} onPress={() => console.log('tapped'} >
                    <Text style={styles.itemText}>{item.code + ' ' + item.name}</Text>
                </TouchableOpacity>
            )}
            />
        </Modal>
        </>
    );
  }
}

A potem wracając do mojego początkowego pliku, po prostu wywołuję komponent w ten sposób:

<DropDownMenu data={this.state.branchData}/>

Jak zaktualizować wartość w obiekcie danych oddziału, aby wyświetlić wybraną gałąź na liście rozwijanej w celu wskazania użytkownikowi, że jego wybór został wybrany, zamiast wyświetlania tekstu zastępczego, który jest wyświetlany tak długo, jak wartość wynosi = do pusta struna.

0
Kris_Stoltz 24 styczeń 2022, 17:37

1 odpowiedź

Najlepsza odpowiedź

Możesz przekazać funkcję aktualizacji stanu jako prop do swojego komponentu DropDownMenu, dodaj tę funkcję do tego samego pliku, w którym stan został zainicjowany

function updateBranch(dataFromDropDownComponent) {
   // modify branch data as required
   // this.setState({...this.state, branchData: ... })
}

A następnie w JSX przekaż go jako prop:

<DropDownMenu data={this.state.branchData} updateBranch={updateBranch}/>

Teraz w swoim komponencie DropDownMenu możesz uzyskać dostęp i wywołać funkcję updateBranch za pomocą this.props.updateBranch, aby zaktualizować stan w razie potrzeby.

1
saibbyweb 24 styczeń 2022, 17:49