Question

我正在尝试在一个EventListner中更改loginForm的父组件中的两个状态（如果这是该函数的正确术语）。

目前，我只能将一个事件波谷的值传递给父对象，但是我想同时做这两个事件（以进行有效的编码）

到目前为止，我发现的唯一解决方案是创建两个功能基本相同的函数。（更改状态）到目前为止，我被告知两次创建相同的功能是不道德的

父组件

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

            )

子组件

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

我修复了它。抱歉，标题令人困惑。它不是使用事件监听器，而是常规事件。

我需要做的是创建一个普通函数，在该函数中我传递两个参数，当我在孩子中传递参数时，我需要识别两个参数

父级中的功能

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

在子级中传递参数

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

在单个函数中响应本机更改两个父状态

1 个答案: