javascript - 如何将 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>

我的想法是按下锚点上的那个按钮，显示菜单并选择一个项目，然后该项目将显示在 textinput 上，就像我在这个组件中键入一样

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>

为什么这样有效 -文档

要为文本输入显示的值。TextInput 是一个受控组件，这意味着如果提供了本机值，将强制匹配此 value 属性。

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