将输入值传递给父组件函数

Question

我正在尝试开发一个 react-native APP。 我对 Java 和 PHP 非常有经验，但是 react-native 让我感到困惑。 基本上，我正在尝试获取一个有效的登录页面（仅用于实际练习），但是当我尝试将值从子组件值（例如，密码输入）传递到父组件函数（登录表单）时，我很挣扎。 这是一个具体的代码： [密码输入]

import * as React from 'react';
import { View } from 'react-native';
import { HelperText, TextInput } from 'react-native-paper';

class PasswordInput extends React.Component {
    constructor(props){
        super(props);
        this.state ={
            password:''
        };
    }
    getPassword() {
        return this.state.password;
    }

    login(){
        alert(this.state.password)
    }

    OnChangesValue(e){
        console.log(e.nativeEvent.text);
        this.setState({
            userName :e.nativeEvent.text,
        })
    }

    changePassword(e){
        console.log(e.nativeEvent.text);
        this.setState({
            password :e.nativeEvent.text,
        })
    }

    hasErrors(text){
        let result=true;
        if(text.length>10 || text.length==0){
            result=false;
        }
        return result;
    };

    render() {
        return (
            <View>
                <TextInput
                    ref="pass"
                    name="password"
                    onChange={this.changePassword.bind(this)}
                    secureTextEntry={true}
                    label="Password"
                    left={<TextInput.Icon name="lock" onPress={() => {
                    }}/>}
                />
                <HelperText type="error" visible={this.hasErrors(this.state.password)}>
                    Password too short!
                </HelperText>
            </View>
        );
    }
}

export default PasswordInput;

这里是 LoginForm 组件：

import * as React from 'react';
import { Component, createRef } from "react";
import {View, StyleSheet} from 'react-native';
import {Button, Card, Title} from 'react-native-paper';
import EmailInput from './login_components/email_input';
import PasswordInput from './login_components/password_input';
import {useRef} from 'react/cjs/react.production.min';

class LoginForm extends React.Component {

  passwordInput = createRef();

  submitForm(){
      alert(this.passwordInput['password'].value);
  }

  render() {
      return (
          <Card style={styles.detailRowContainer}>
              <Card.Title
                  title="Signup!"
                  subtitle="Inserisci i tuoi dati per eseguire il login"
              />
              <EmailInput/>
              <PasswordInput ref={this.passwordInput}/>
              <Card.Actions>
                  <Button mode="contained" type="submit" style={styles.loginButtonSection} onPress={() => this.submitForm()}>
                      LOGIN
                  </Button>
              </Card.Actions>
          </Card>
      );
  }
}

const styles = StyleSheet.create({
    loginButtonSection: {
        width: '100%',
        height: '30%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    detailRowContainer: {
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
});
export default LoginForm;

我的目标（目前）是了解如何在我的 LoginForm 组件中接收 PasswordInput 值，以便在警报中打印密码（submitForm() 函数）。

Answer 1

也许更容易的是反其道而行之，并拥有一个可重用的组件，该组件被赋予道具以改变其外观和功能：

登陆页面：

// importing Input.tsx from folder: components
import Input from '../components/Input';

export default function LandingScreen() {
  // Hooks for email and password
  const [email, set_email] = useState<string>('');
  const [password, set_password] = useState<string>('');

return(
       <View>
            <Input
              placeholder="Email"
              onChangeText={(text) => set_email(text)}
              keyboardType="email-address"
            />
            <Input
              placeholder="Password"
              onChangeText={(text) => set_password(text)}
              secureTextEntry={true}
              keyboardType="default"
            />
       </View>
)

下面是一个 Input 组件的例子： （因此，我们现在有一个可重用的组件，它接受在其接口中定义的一些道具，而不是将信息从子代传递给父代）

在文件夹中找到导入的 Input.tsx：组件

import React, { FC } from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

interface Props {
  placeholder: string;
  onChangeText: (text: string) => void;
  secureTextEntry?: boolean;
  keyboardType: any;
}

const Input: FC<Props> = (props) => {
  const { width } = useWindowDimensions();
  return (
    <View style={styles.container}>
      <TextInput
        style={[styles.input, { width: width * 0.8 }]}
        autoCapitalize={'none'}
        placeholder={props.placeholder}
        secureTextEntry={props.secureTextEntry}
        onChangeText={props.onChangeText}
        keyboardType={props.keyboardType}
        placeholderTextColor={'black'}
      />
    </View>
  );
};

export default Input;

const styles = StyleSheet.create({
  container: {
    alignSelf: 'center',
    backgroundColor: '#e3e3e3',
    borderRadius: 5,
    marginVertical: 10,
  },
  input: {
    padding: 15,
  },
});

使用“formik”和“yup”开始登录屏幕的一个好方法是快速创建输入字段并使用挂钩进行客户端验证。