如何将 React Native Paper 菜单中的选定项目传递给 Input/TextInput onChangeText 行为答案

【问题标题】：How do i pass a selected item from React Native Paper Menu to Input/TextInput onChangeText behaviour如何将 React Native Paper 菜单中的选定项目传递给 Input/TextInput onChangeText 行为
【发布时间】：2020-05-05 02:00:13
【问题描述】：

我正在尝试弄清楚如何将参数/prop 传递给 react native paper 的输入，因为 react native paper 没有适当的下拉菜单，所以有一个我喜欢的“菜单”在我的项目上实现，但是文档太糟糕了，没有关于如何从该项目中获取元素的示例，也没有将该参数传递给其他地方。

            <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 上，就像我在这个组件中键入一样

【问题讨论】：

你测试我的答案了吗？

标签： javascript react-native react-native-paper

【解决方案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

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

编辑：完整的工作示例 - https://snack.expo.io/4I0Xr0HBR

【讨论】：

这至少没有触及我的问题
等等，你的问题是关于实现实际的下拉菜单吗？不清楚你想要什么
我想要的是设置我在菜单上单击的项目，在 onchangetext 道具中的 textinput 内，并不像听起来那么简单
为什么要通过 onChangeText 更新文本输入值？您可以使用 setUsername 显式设置“值”
@NicolasSilva 我在 expo 中添加了一个完整的例子

【解决方案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>
);

【讨论】：