我如何将所选项目从 React Native Paper Menu 传递给 Input/TextInput onChangeText 行为

Question

我想弄清楚如何将 param/prop 传递给 react native paper 的输入，因为 react native paper 没有合适的下拉菜单，所以有一个 "menu"我很乐意在我的项目中实现，但是文档太糟糕了，没有关于如何从该项目获取元素的示例，也没有将该参数传递给其他地方。

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

我的想法是按下锚点上的那个按钮，显示菜单和 select 一个项目，然后那个项目显示在文本输入上，就像我在这个组件中输入一样

Answer 1

假设文本输入和下拉菜单是同一组件的一部分 - 使用 setUsername 更改 Username 的值将更新文本输入

    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>

为什么这有效 - doc

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided.

编辑：完整的工作示例 - 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>
);

我如何将所选项目从 React Native Paper Menu 传递给 Input/TextInput onChangeText 行为

How do i pass a selected item from React Native Paper Menu to Input/TextInput onChangeText behaviour

javascript

react-native

react-native-paper