admin管理员组文章数量:1330565
I'm trying to figure out how to pass a param/prop to an input from react native paper, since react native paper doesn't have a proper dropdown menu, there is a "menu" that i'll love to implement on my project, but the documentation is so bad, there is no example on how to get the element from that item, neither pass that param to somewhere else.
<TextInput
style={{width: 300, backgroundColor: 'transparent', margin: 0, padding: 0}}
label='Email'
value={Username}
onChangeText={User => setUsername(User)}
/>
and here is the menu, as you can see
<Provider>
<Menu
visible={isOpen}
onDismiss={() => setOpen(false)}
anchor={
<Button style={{marginTop: 25}} color="#8DB600" icon="account" dark={true} mode="contained" onPress={() => setOpen(true)}>
Ingresar
</Button>
}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</Provider>
my idea is to press on that button on the anchor, display the menu and select an item, and that item to be displayed on the textinput as if i typed inside this ponent
I'm trying to figure out how to pass a param/prop to an input from react native paper, since react native paper doesn't have a proper dropdown menu, there is a "menu" that i'll love to implement on my project, but the documentation is so bad, there is no example on how to get the element from that item, neither pass that param to somewhere else.
<TextInput
style={{width: 300, backgroundColor: 'transparent', margin: 0, padding: 0}}
label='Email'
value={Username}
onChangeText={User => setUsername(User)}
/>
and here is the menu, as you can see
<Provider>
<Menu
visible={isOpen}
onDismiss={() => setOpen(false)}
anchor={
<Button style={{marginTop: 25}} color="#8DB600" icon="account" dark={true} mode="contained" onPress={() => setOpen(true)}>
Ingresar
</Button>
}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</Provider>
my idea is to press on that button on the anchor, display the menu and select an item, and that item to be displayed on the textinput as if i typed inside this ponent
Share Improve this question asked May 5, 2020 at 2:00 Nicolas SilvaNicolas Silva 6492 gold badges11 silver badges31 bronze badges 1- did you test my answer? – Muhammad Numan Commented May 18, 2020 at 13:40
2 Answers
Reset to default 5 +25Assuming both the text input and the drop-down are part of the same ponent - changing the value of Username
with setUsername will update the text-input
const [Username, setUsername] = useState(''); // both ponents must have access to Username state
<TextInput
style={{width: 300, backgroundColor: 'transparent', margin: 0, padding: 0}}
label='Email'
value={Username}
onChangeText={User => setUsername(User)}
/>
<Provider>
<Menu
visible={isOpen}
onDismiss={() => setOpen(false)}
anchor={
<Button style={{marginTop: 25}} color="#8DB600" icon="account" dark={true} mode="contained" onPress={() => setOpen(true)}>
Ingresar
</Button>
}>
<Menu.Item onPress={() => setUsername("Item 1")}} title="Item 1" /> // directly set username like this
<Menu.Item onPress={() => setUsername("Item 2")} title="Item 2" />
<Menu.Item onPress={() => setUsername("Item 3")} title="Item 3" />
</Menu>
</Provider>
Why this works - doc
The value to show for the text input. TextInput is a controlled ponent, which means the native value will be forced to match this value prop if provided.
edit: full working example - https://snack.expo.io/4I0Xr0HBR
if your menu and Textinput is in one ponent then you can change value of username by useState otherwise you can use REDUX if both are not on same ponent
you have to close menu when we click on any menu item by setOpen(false);
import React from "react";
import { TextInput, StyleSheet, View } from "react-native";
import { Button, Menu, Provider } from "react-native-paper";
const App = () => {
const [Username, setUsername] = React.useState("");
const [isOpen, setOpen] = React.useState(false);
const onPressItemHandler = (value) => {
setUsername(value);
setOpen(false);
};
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<TextInput
style={{
width: 300,
backgroundColor: "transparent",
margin: 0,
padding: 0,
}}
label="Email"
value={Username}
onChangeText={(User) => setUsername(User)}
/>
<Menu
style={{ marginTop: 70 }}
visible={isOpen}
onDismiss={() => setOpen(false)}
anchor={
<Button
style={{ marginTop: 25 }}
color="#8DB600"
icon="account"
dark={true}
mode="contained"
onPress={() => setOpen(true)}
>
Ingresar
</Button>
}
>
<Menu.Item
onPress={() => onPressItemHandler("Item 1")}
title="Item 1"
/>
<Menu.Item
onPress={() => onPressItemHandler("Item 2")}
title="Item 2"
/>
<Menu.Item
onPress={() => onPressItemHandler("Item 3")}
title="Item 3"
/>
</Menu>
</View>
);
};
export default () => (
<Provider>
<App />
</Provider>
);
本文标签:
版权声明:本文标题:javascript - How do i pass a selected item from React Native Paper Menu to InputTextInput onChangeText behaviour - Stack Overflo 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742222212a2435515.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论