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

Question

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

            <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>

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

Answer 1

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

Почему это работает - do c

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

edit: полный рабочий пример - https://snack.expo.io/4I0Xr0HBR

Answer 2

, если ваше меню и Textinput находятся в одном компоненте, вы можете изменить значение имени пользователя на 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>
);