时间戳

首页 > 解决方案 > 使用 react-native-dialog，如何获取 Dialog.Input 内容？

react-native - 使用 react-native-dialog，如何获取 Dialog.Input 内容？

问题描述

<Dialog.Container visible={this.state.dialogSendEmailVisible}>
      <Dialog.Title>Password Recovery</Dialog.Title>
      <Dialog.Input label="Email"></Dialog.Input>
      <Dialog.Button label="OK" onPress={this.handleSendEmail} />
 </Dialog.Container>

我有这个简单的对话框，用于密码恢复目的。我不是 FE 开发人员，我不知道如何将在电子邮件字段上键入的值传递给 handleSendEmail 函数。Github 和 npm 页面没有任何示例。Github 页面：https ://github.com/mmazzarolo/react-native-dialog

PS：这可能是一个非常反应原生的基本功能，但我没有找到方法......

标签： react-native

解决方案

假设 Dialog Inputs/Button 扩展了 React Native 自己的 - 那么您可以调用：

onSubmitEditing and onChangeText

从文档：

onSubmitEditing

按下文本输入的提交按钮时调用的回调。如果指定了 multiline={true}，则无效。

TYPE        REQUIRED
function    No

和

onChangeText

文本输入的文本更改时调用的回调。更改的文本作为参数传递给回调处理程序。

TYPE        REQUIRED
function    No

它的意思如下：

<Dialog.Input label="Email" 
   onChangeText={email => this.setState({email})}
   value={this.state.email}
   onSubmitEditing={
       (event) => this.doSomethingWithSubmit(event)
   }
>
</Dialog.Input>

更新

所以我已经对此进行了测试，它的工作原理如下 - 旁注 - 我正在使用 Typescript，所以只需删除类型（: string）等：

在渲染中

return (
        <View>
           <View>
                <Button onPress={this.showDialog}>
                    <Text>Show Dialog</Text>
                </Button>
                <Dialog.Container visible={true}>
                    <Dialog.Title>Password Recovery</Dialog.Title>
                    <Dialog.Input label="Email" onChangeText={(email : string) => this.handleEmail(email)}
                    ></Dialog.Input>
                    <Dialog.Button label="OK" onPress={this.handleSendEmail} />
                </Dialog.Container>
            </View>
        </View>
    )

处理电子邮件： 

private handleEmail = (email : string) => {
    console.log("email");
    console.log(email);
}

结果：

例子

更远

作为这个项目的一个旁注，我注意到当我使用 Live reload 时 - Dialog 从未重新渲染，而是在旧 Dialog 之上渲染。我会考虑到这一点。也许这是我的环境，但其他一切都很好。

推荐阅读