无法从 React Native 中导入的 TextInput 更改或使用属性答案

【问题标题】：Can't change or use properties from imported TextInput in React Native无法从 React Native 中导入的 TextInput 更改或使用属性
【发布时间】：2021-01-14 14:18:04
【问题描述】：

我试图在 Formik 中使用创建的 TextField 组件，我创建了自己的名为 Input 的 TextField 组件并在表单中导入，但我无法更改它的任何道具或调用它的方法，如 style 或 onChangeText，任何我例如，尝试与 onChangeText 一起使用是行不通的。这是我的组件和公式中的代码。

这是我的输入组件的代码以及我将其导入到的表单：

// Input Component
import React, { useState } from 'react';
import { TextInput, TextInputProps } from 'react-native';
import styles from '../../styles/styles';

interface InputProps extends TextInputProps{
    value: string,
}

const Input: React.FC<InputProps> = ({value, ...rest}) => {
    const [color, setColor] = useState("#f2f2f2");

    return (
        <TextInput
            onFocus={() => setColor('#f9ffc4')}
            onBlur={() => setColor('#f2f2f2')}
            style={{
                width: "70%",
                minHeight: 40,
                borderColor: styles.primaryColor,
                borderBottomWidth: 1,
                padding: 0,
                borderRadius: 5,
                marginBottom: 5,
                backgroundColor: color,
            }}
        >
        </TextInput>
    )
}

export default Input; 


// Form Page
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { Formik } from 'formik'
import Input from '../../../components/inputs/Input';

export default function FormikTest({ }) {
    return (
            <Formik
                initialValues={{ input: '', teste: '' }}
                onSubmit={values => console.log(values)}
            >
                {({ handleChange, handleSubmit, values }) => (
                    <View style={{ padding: 8, alignItems: 'center' }}>
                        <TextInput
                            style={{
                                margin: 10,
                                width: '50%',
                                height: 50,
                                borderWidth: 1,
                                borderColor: '#000',
                            }}
                            onChangeText={handleChange('input')}
                            value={values.input}
                        />

                        <Input
                            onChangeText={() => { console.log('aqui') }}
                            value={values.teste}
                        />

                        <Button onPress={handleSubmit} title="Submit" />
                    </View>
                )}
            </Formik>
    )
}

【问题讨论】：

标签： javascript typescript react-native

【解决方案1】：

为了让您的自定义 Input 识别您传递的道具，您必须指示它识别它们。像这样

const Input: React.FC<InputProps> = (props) => {
    const [color, setColor] = useState("#f2f2f2");

    return (
        <TextInput
            onFocus={() => setColor('#f9ffc4')}
            onBlur={() => setColor('#f2f2f2')}
            style={{
                width: "70%",
                minHeight: 40,
                borderColor: styles.primaryColor,
                borderBottomWidth: 1,
                padding: 0,
                borderRadius: 5,
                marginBottom: 5,
                backgroundColor: color,
            }}
            onChangeText={props.onChangeText}
            autoFocus={props.autoFocus}
            ...
        >
        </TextInput>
    )
}

export default Input;

对于你想要传递的每一个prop，你都必须将它添加到输入中，否则你自定义的组件怎么知道你想要从中得到什么？

【讨论】：