Как передать выбранный элемент из меню React Native Paper в поведение Input/TextInput onChangeText

Я пытаюсь понять, как передать параметр/реквизит на вход из реагирующей нативной бумаги, поскольку реагирующая нативная бумага не имеет надлежащего выпадающего меню, есть «меню», которое я с удовольствием реализую на своем проект, но документация настолько плоха, что нет ни примера того, как получить элемент из этого элемента, ни передать этот параметр куда-то еще.

            <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={() => {}} title="Item 1" />
            <Menu.Item onPress={() => {}} title="Item 2" />
            <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
      </Provider>

моя идея состоит в том, чтобы нажать на эту кнопку на якоре, отобразить меню и выбрать элемент, и этот элемент будет отображаться в текстовом вводе, как если бы я набрал внутри этого компонента


react-native javascript react-native-paper
person Nicolas Silva    schedule 05.05.2020    source источник
comment
ты проверял мой ответ?   -  person Muhammad Numan    schedule 18.05.2020

Ответы (2)


arrow_upward
3
arrow_downward

если ваше меню и текстовый ввод находятся в одном компоненте, вы можете изменить значение имени пользователя с помощью useState, иначе вы можете использовать REDUX, если оба не находятся в одном компоненте.

вы должны закрыть меню, когда мы нажимаем на любой пункт меню с помощью 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>
);

введите здесь описание изображения

person Muhammad Numan    schedule 17.05.2020

arrow_upward
5
arrow_downward

Предполагая, что ввод текста и раскрывающийся список являются частью одного и того же компонента - изменение значения Username с помощью setUsername обновит ввод текста

    const [Username, setUsername] = useState(''); // both components 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>

Почему это работает — документ

Значение, отображаемое для ввода текста. TextInput — это контролируемый компонент, что означает, что собственное значение будет принудительно соответствовать этому свойству значения, если оно предоставлено.

редактировать: полный рабочий пример - https://snack.expo.io/4I0Xr0HBR

person LonelyCpp    schedule 12.05.2020
comment
это даже не касается моего вопроса, по крайней мере - person Nicolas Silva; 12.05.2020
comment
Подождите, ваш вопрос о реализации фактического выпадающего списка? не понятно чего ты хочешь - person LonelyCpp; 13.05.2020
comment
что я хочу, так это установить элемент, который я щелкнул в меню, внутри ввода текста в реквизите onchangetext, не так просто, как кажется - person Nicolas Silva; 13.05.2020
comment
почему вы хотите, чтобы ваше значение ввода текста обновлялось через onChangeText? вы можете установить «значение» явно, используя setUsername - person Pulkit Sharma; 17.05.2020
comment
@NicolasSilva Я добавил полный пример в экспо - person LonelyCpp; 18.05.2020
comment
@LonelyCpp я буквально получил ошибку с вашим примером выставки: / -> menuVisible не является функцией - person Nicolas Silva; 18.05.2020