反应本机自定义组件道具不起作用答案

【问题标题】：React native custom component props not working反应本机自定义组件道具不起作用
【发布时间】：2021-10-23 14:16:39
【问题描述】：

嘿，所以我正在尝试使用自定义文本输入并为其提供 autoCorrect、autoCapitalise 等道具，但由于某种原因无法正常工作，只有当我直接在从 react native 模块导入的原始 TextInput 上使用它们时才有效。这是我如何做的代码。请帮我看看我在哪里或做错了什么。

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import AppTextInput from '../components/AppTextInput';
import { Formik } from 'formik';
import * as Yup from 'yup';
import Screen from '../components/Screen';
import AppBtn from '../components/AppBtn';
import AppText from '../components/AppText';

const validationSchema = Yup.object().shape({
  email: Yup.string().required().email().label('Email'),
  password: Yup.string().required().min(4).label('Password'),
});

export default function LoginScreen() {
  const img = require('../assets/logo.png');

  return (
    <Screen>
      <Image source={img} style={styles.logo} />

      <Formik
        initialValues={{ email: '', password: '' }}
        onSubmit={(values) => console.log(values)}
        validationSchema={validationSchema}>
        {({ handleChange, handleSubmit, errors }) => (
          <>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="email"
              onChangeText={handleChange('email')}
              keyboardType="email-address"
              placeholder="email"
            />
            <AppText style={{ color: 'red' }}>{errors.email}</AppText>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect={true}
              icon="lock"
              keyboardType="numeric"
              onChangeText={handleChange('password')}
              secureTextEntry={true}
              placeholder="password"
            />
            <AppText style={{ color: 'red' }}>{errors.password}</AppText>
            <View style={styles.btn}>
              <AppBtn title="Login" onPress={handleSubmit} />
            </View>
          </>
        )}
      </Formik>
    </Screen>
  );
}

然后appTextInput本身就是这个

import { StyleSheet, Text, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function AppTextInput({ icon, placeholder }) {
  return (
    <View style={styles.container}>
      {/* render only if icon is defined */}
      {icon && (
        <MaterialCommunityIcons name={icon} size={40} style={styles.icon} />
      )}
      <TextInput style={{ fontSize: 25 }} placeholder={placeholder} />
    </View>
  );
}

我哪里出错了？即使没有formik 和是的，它仍然拒绝通过控制台从输入字段中注销值。提前感谢您的帮助:)

【问题讨论】：

标签： reactjs react-native components expo textinput

【解决方案1】：

为了使这些道具起作用，您必须将它们提供给实际的TextInput 组件。在您的LoginScreen 组件中，您使用的是正确的AppTextInput。

但是在您的 AppTextInput 组件中，您只处理两个道具，icon 和 placeholder。要使其他 TextInput 道具工作，您必须将它们提供给您的 TextInput 组件。

import { StyleSheet, Text, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function AppTextInput(props) {
  const { icon, placeholder } = props;
  return (
    <View style={styles.container}>
      {/* render only if icon is defined */}
      {icon && (
        <MaterialCommunityIcons name={icon} size={40} style={styles.icon} />
      )}
      <TextInput
        {...props}
        style={{ fontSize: 25 }}
        placeholder={placeholder}
      />
    </View>
  );
}

在这里，我使用 {...props} 将传递的道具添加到TextInput 组件。现在你的 props 也被传递给 TextInput 组件，它应该可以按预期工作。

【讨论】：