Absoluto novato nativo de reacción aquí. Tengo problemas para actualizar el 'elemento seleccionado'. Estoy usando esto como una pieza de datos ficticios:
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}, ] } };Luego hice un archivo separado para mi componente desplegable, se ve así:
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> </> ); } }Y luego de vuelta a mi archivo inicial, simplemente estoy llamando al componente de esta manera:
<DropDownMenu data={this.state.branchData}/>¿Cómo actualizo el valor en el objeto de datos de la rama para mostrar la rama seleccionada en el menú desplegable para indicar al usuario que su elección ha sido seleccionada en lugar de mostrar el texto del marcador de posición que se muestra siempre que el valor sea = a un cuerda vacía.
Puede pasar una función de actualización de estado como prop a su componente DropDownMenu , agregue esta función al mismo archivo donde se ha inicializado el estado
function updateBranch(dataFromDropDownComponent) { // modify branch data as required // this.setState({...this.state, branchData: ... }) }y luego en JSX, pásalo como accesorio:
<DropDownMenu data={this.state.branchData} updateBranch={updateBranch}/> Ahora, en su componente DropDownMenu , puede acceder y llamar a la función updateBranch a través de this.props.updateBranch para actualizar el estado cuando sea necesario.