React Native更改了两个父项在单个函数中的状态

Question

I'm trying to change two states in the parent component of my loginForm with in one EventListner (if this is the right term for the function).

Currently I'm only able to pass the value of one event trough to the parent, but I want to do both (for efficient coding)

The only solution I've found so far is to create two functions, which do essentially the same. (change a state) So far I've been told it's bad ethics to create the same function twice

Parent Component

changeStateValue = setEmail  => {
      this.setState({
        email:setEmail,
        password: setPassword,
        email_valid: this.validateEmail(setEmail),
      })
    }
    render() {
      const { email, password, email_valid, showLoading, } = this.state;
      return (
        <View style={styles.container}>
          <ImageBackground source={BG_IMAGE} style={styles.bgImage}>
            {this.state.fontLoaded ? 
            (
              <LoginForm
                loginButton={this.loginButton}
                setEmail={email}
                setPassword={password}
                password={password}
                email_valid={email_valid}
                showLoading={showLoading}
                navigation={this.props.navigation}
                changeStateValue={this.changeStateValue}
              />

            ) 

Child Component

export default function LoginForm (props)  {
    const { email, password, email_valid, showLoading } = props;

    return(
        <View style={styles.loginView}>
            <View style={styles.loginTitle}>
                <Image 
                    style={styles.imageCard} 
                    source={RAPIO_LOGO}
                />
            </View>
            <View style={styles.loginInput}>
            <FormInput
                icon="user"
                containerStyle={{ marginVertical: 10 }}
                onChangeText={setEmail => {
                    props.changeStateValue(setEmail)
                    // this.passwordInput.focus();
                    }}
                value={email}
                inputStyle={{ marginLeft: 10, color: 'white' }}
                keyboardAppearance="light"
                placeholder="Email"
                autoFocus={false}
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                returnKeyType="next"
                onSubmitEditing={() => {
                props.changeStateValue(e)
                this.passwordInput.focus();
                }}
                blurOnSubmit={false}
                placeholderTextColor="white"
                errorStyle={{ textAlign: 'center', fontSize: 12 }}
                errorMessage={
                email_valid ? null : 'Please enter a valid email address'
                }
            />
            <FormInput
                icon="lock"
                containerStyle={{ marginVertical: 10 }}
                onChangeText={setPassword => {
                    props.changeStateValue(setPassword)
                    // this.passwordInput.focus();
                    }}
                value={password}
                inputStyle={{ marginLeft: 10, color: 'white' }}
                secureTextEntry={true}
                keyboardAppearance="light"
                placeholder="Password"
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="default"
                returnKeyType="done"
                blurOnSubmit={true}
                placeholderTextColor="white"
                onSubmitEditing={props.loginButton}
            />
            </View>
            <Button
            title="LOG IN"
            containerStyle={{ flex: -1 }}
            buttonStyle={styles.signUpButton}
            titleStyle={styles.signUpButtonText}
            onPress={props.loginButton}
            loading={showLoading}
            loadingProps={{ size: 'small', color: 'white' }}
            disabled={!email_valid && password.length < 8}
            />
            <View style={styles.footerView}>
            <Text style={{ color: 'white', marginBottom: 15, }}>New here?</Text>
            <Button
                title="Create an Account"
                clear
                activeOpacity={0.5}
                titleStyle={styles.loginHereText}
                titleStyle={{ color: '#dd016b', fontSize: 15 }}
                buttonStyle={{ backgroundColor: 'transparent' }}
                containerStyle={{ marginTop: -10 }}
                onPress={() => this.props.navigation.navigate('SignupView')}
            />
            </View>
        </View>
    )
}

Answer 1

I fixed it. Sorry for the confusing title. It wasn't using a event listener, but a regular event.

What I needed to do was create a normal function where I pass on two parameters, and when I pass on the parameters in my child I needed to identify both parameters

Function in the parent

changeStateValue =(setEmail, setPassword)=> {
      this.setState({
        email:setEmail,
        password: setPassword,
        email_valid: this.validateEmail(setEmail),
      })
    }

Passing on parameters in child

//For email input
onChangeText={setEmail => {
  props.changeStateValue(setEmail, props.setPassword)
}}
//For password input
onChangeText={setPassword => {
  props.changeStateValue(setPassword, props.setEmail)
}}