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

Question

<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 原生的基本功能，但我没有找到方法......

Answer 1

假设对话框输入/按钮扩展了 React Native 自己的 - 那么你可以调用:

onSubmitEditing and onChangeText

来自文档:

onSubmitEditing

Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified.

TYPE        REQUIRED
function    No

还有

onChangeText

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

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);
}

结果:

进一步

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