时间戳

首页 > 解决方案 > React Native：将设置从自定义组件传递到 TextInput

reactjs - React Native：将设置从自定义组件传递到 TextInput

问题描述

我有一个名为 TextInputField.js 的自定义组件：

import React from "react";
import {
    View,
    Text,
    TextInput,
    StyleSheet
} from "react-native";

const TextInputField = (props) => {
  return (
    <View style={styles.inputWrapper}>
      <Text style={styles.inputLabel}>{props.label}</Text>
      <TextInput {...props} style={styles.inputField} />
      <Text style={styles.inputCaption}>{props.caption}</Text>
    </View>
  );
};

export default TextInputField;

我正在使用这样的：

<TextInputField 
  label='Test'
  caption='Sample'
  multiline={true}
  numberOfLines={4}
  onChangeText={(text) => {
    onChangeTextHandler(text);
  }}
/>

标签和标题工作正常。

这道小吃一切正常。

我的问题是：如何确保我添加的任何设置（如 multiline/numberOfLines={4}）被传递并被实际的 TextInput 使用？

标签： reactjsreact-native

解决方案

为了真正确保所有需要的东西都被传递下来，您应该进行道具验证，如此处所述。

React 有一些内置的类型检查能力。要对组件的 props 运行类型检查，您可以分配特殊的 propTypes

你会像这样使用它：

TextInputField.propTypes = {
  label: PropTypes.string,
   [.....]
};

推荐阅读