javascript - How do i pass a selected item from React Native Paper Menu to InputTextInput onChangeText behaviour - Stack Overflo

admin管理员组

文章数量:1333685

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

• javascript
• react-native
• react-native-paper

Share Improve this question Follow asked May 5, 2020 at 2:00 Nicolas SilvaNicolas Silva 64922 gold badges1111 silver badges3131 bronze badges 1

• did you test my answer? – Muhammad Numan Commented May 18, 2020 at 13:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +25

Assuming 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>
);

本文标签：