将文本框值从一个文件传递到另一个文件

Question

as i am building my first React application in particular react-native application. I want to pass a textbox value from one js file to another. Can somebody help me how it should be done?

my code in first.js

                    <Text style={{ color: 'black', fontSize: 20, textAlign: 'left', width: width - 60 }}>{GLOBAL.Email}</Text>
                    <View style={[styles.textInputFrame, { width: width - 48, }]} >
                        <TextInput
                            keyboardType='email-address'
                            style={styles.textInput}
                            onChangeText={(email) => this.setState({ email })}
                            returnKeyType='next'
                            onSubmitEditing={() => this.refs.passwordInput.focus()}
                            underlineColorAndroid='transparent'
                        />
                    </View>

Thank you in advance

Answer 1

1. Store textbox value as a global state by using Context , or any libraries like Redux, Mobx, ...

2. Pass textbox value ( email state of first component ) as a property of your second component

Answer 2

In addition to @khanh solution you can also

3. Create your own data store which you will import in your different files to store your data. I highly recommend using the observer pattern for this one (see https://www.dofactory.com/javascript/observer-design-pattern ).

4. Send a event on which you can subscribe anywhere in your app, you can use https://www.npmjs.com/package/react-native-event-listeners for this one.