CODEWITHSUNDEEP
react-native
sheepCow
sheepCow

Reputation: 99

Using react-native-dialog, how to get Dialog.Input content?

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

I have this simple dialog, this is being used for password recovery purposes. I am not a FE developer, and I am not finding how can I pass the value typed on Email field to handleSendEmail function. Github and npm pages do not have any example. Github page: https://github.com/mmazzarolo/react-native-dialog

PS: This can be a very react native basic feature, but I am not findindg a way...

Upvotes: 2

Views: 12373

Answers (1)

JRK
JRK

Reputation: 3904

Assuming that the Dialog Inputs/Button extend React Native's own - then you can call:

onSubmitEditing and onChangeText

From the docs:

onSubmitEditing

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

TYPE        REQUIRED
function    No

And

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

It means something like below:

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

UPDATE

So I have tested this, and it works as below - side note - I'm using Typescript so just remove the types ( : string) etc:

In Render

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

handleEmail: 

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

Result:

Example

Further

As a side note of this project, I noticed when I used Live reload - that the Dialog was never re-rendered rather, rendered on top of the old Dialog. I would take this into consideration. Perhaps it was my environment, but everything else worked fine.

Upvotes: 5

Related Questions