Блог

Я хочу знать, как я могу отправить функцию из родительского компонента в дочерний компонент. Потому что каждый раз, когда я получаю ошибку»Функция проверки» — это не функция». Очень нужна ваша помощь. Также я расширю свой компонент SigIn и добавлю туда другие функции проверки, так что это очень важно для меня

Компонент подписи

 import React, { Component } from 'react'
import { View } from 'react-native'
import { MyButton, MyTextInput, Header } from '../uikit'
import { styles } from '../constants/constants'
import { LOG_IN } from '../routes'
import { isEnoughSymbols } from '../validation/isEnoughSymbols'

export class SignIn extends Component {
    state = {
        symbolsValidation: true
    }

    isEnoughSymbols = (text) => {
        if (text.trim().length < 8)
            this.setState({ symbolsValidation: false })
    }

    render() {
        const { mainContainer, buttons } = styles



        return (
            <View>
                <View style={mainContainer}>
                    <MyTextInput
                        placeholder={'Email/Login'}
                        isSecure={false}
                        errorText={"Incorrect email format!"}
                    />
                    <MyTextInput
                        placeholder={'Password'}
                        isSecure={true}
                        errorText={'Password must contain at least 8 symbols!'}
                        validationFunction={this.isEnoughSymbols.bind(this)}
                    />
                    <MyTextInput
                        placeholder={'Confirm password'}
                        isSecure={true}
                        errorText={"Passwords don't match"}
                    />
                    <View style={buttons}>
                        <MyButton
                            name={'confirm'.toUpperCase()}
                            onPress={() => this.props.navigation.navigate(LOG_IN)} />
                    </View>
                </View>
            </View>
        )
    }
}
 

И компонент MyTextInput

 import React, {Component} from 'react'
import { TextInput, View, StyleSheet } from 'react-native'
import { w, width, h } from '../constants/constants'
import { ErrorMessage } from '.'
//import { isEnoughSymbols } from '../validation/isEnoughSymbols'

const MyTextInput = ({ placeholder, isSecure, errorText, validationFunction }) => {
    let isValid = true
    return (
        <View style={styles.container}>
            <TextInput
                style={styles.text}
                placeholder={placeholder}
                secureTextEntry={isSecure}
                onEndEditing={(e) => validationFunction(e.nativeEvent.text)}
            >
            </TextInput>
            {
                isValid ? null : <ErrorMessage
                    errorText={errorText}
                />
            }

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'flex-start'
    },

    text: {
        borderBottomWidth: 1,
        borderColor: 'black',
        fontSize: 30,
        width: w - w / 10,
        alignSelf: 'center',
        textAlign: 'left',
        marginTop: 20,
        color: 'black'
    },
}
)

export { MyTextInput }