Question

我正在使用数组通过高阶函数映射来映射数据。而且我还在使用 cutome组件InputField 来接收道具。但是当我调用该函数时会说。

道具类型失败：道具onChangeText被标记为 InputField。但其值为undefined。

因此，当我进行控制台操作时，警告电子邮件和密码显示为空。

这是我的代码

登录（屏幕）

import React, { Component } from "react";
import { StatusBar, View, Text, TouchableOpacity } from "react-native";
import styles from "./styles";
import InputField from "../../components/InputField";

class SignIn extends Component {
  state = {
    email: "",
    password: "",
    textInputData: [
      {
        inputType: "email",
        placeholder: "Enter Email",
        multiline: false,
        autoCorrect: false,
        autoFocus: true,
        onChangeText: this.handleEmailChange
      },
      {
        inputType: "password",
        placeholder: "Enter Password",
        multiline: false,
        autoCorrect: false,
        autoFocus: false,
        onChangeText: this.handlePasswordChange
      }
    ]
  };

  //handle email text input change
  handleEmailChange = email => {
    this.setState({ email: email });
  };

  //handle password text input change
  handlePasswordChange = password => {
    this.setState({ password: password });
  };

  replaceScreen = screen => {
    const { navigate } = this.props.navigation;
    navigate(screen);
  };

  render() {
    return (
      <View style={styles.mainContainer}>
        <StatusBar backgroundColor={"#455A64"} />
        {this.state.textInputData.map((item, index) => {
          return (
            <View key={index} style={styles.inputViewContainer}>
              <InputField
                inputType={item.inputType}
                placeholder={item.placeholder}
                multiline={item.multiline}
                autoCorrect={item.autoCorrect}
                autoFocus={item.autoFocus}
                onChangeText={item.onChangeText}
              />
            </View>
          );
        })}

        <TouchableOpacity
          style={styles.buttonContainerStyle}
          activeOpacity={0.7}
          onPress={() => {
            this.replaceScreen("HomeNavigation");
          }}
        >
          <Text style={styles.buttonTextStyle}>SignIn</Text>
        </TouchableOpacity>

        <View style={styles.bottomContainer}>
          <Text>Don't have an account? </Text>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => {
              this.replaceScreen("SignUp");
            }}
          >
            <Text style={styles.signUpTextStyle}>SignUp</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
export default SignIn;

InputField（客户组件）

import React, { Component } from "react";
import { TextInput, StyleSheet } from "react-native";
import { PropTypes } from "prop-types";

class InputField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secureInput: !(
        props.inputType === "text" ||
        props.inputType === "email" ||
        props.inputType === "number"
      )
    };
  }

  render() {
    const {
      inputType,
      placeholder,
      multiline,
      autoCorrect,
      autoFocus,
      onChangeText
    } = this.props;
    const { secureInput } = this.state;

    return (
      <TextInput
        inputType={inputType}
        secureTextEntry={secureInput}
        placeholder={placeholder}
        multiline={multiline}
        autoCorrect={autoCorrect}
        autoFocus={autoFocus}
        onChangeText={onChangeText}
        style={styles.textInputStyle}
      />
    );
  }
}

InputField.propTypes = {
  inputType: PropTypes.string.isRequired,
  placeholder: PropTypes.string.isRequired,
  multiline: PropTypes.bool,
  autoCorrect: PropTypes.bool,
  autoFocus: PropTypes.bool,
  onChangeText: PropTypes.func.isRequired
};

const styles = StyleSheet.create({
  textInputStyle: {
    color: "black",
    fontSize: 16
  }
});

export default InputField;

如何解决此问题。我正在等待您的解决方案。并且请让我知道我是否使用正确的方法。预先感谢。

Answer 1

几个小时后，我解决了问题。我只在登录屏幕中更改状态下的 onChangeText数据。自定义组件 InputField 中没有任何更改。问题是，我从状态错误地调用了该方法。

之前

state = {
    email: "",
    password: "",
    textInputData: [
      {
        inputType: "email",
        placeholder: "Enter Email",
        multiline: false,
        autoCorrect: false,
        autoFocus: true,
        onChangeText: this.handleEmailChange
      },
      {
        inputType: "password",
        placeholder: "Enter Password",
        multiline: false,
        autoCorrect: false,
        autoFocus: false,
        onChangeText: this.handlePasswordChange
      }
    ]
  };

之后

state = {
    email: "",
    password: "",
    textInputData: [
      {
        inputType: "email",
        placeholder: "Enter Email",
        multiline: true,
        autoCorrect: false,
        autoFocus: true,
        onChangeText: text => this.handleEmailChange(text)
      },
      {
        inputType: "password",
        placeholder: "Enter Password",
        multiline: false,
        autoCorrect: false,
        autoFocus: false,
        onChangeText: text => this.handlePasswordChange(text)
      }
    ]
  };

Answer 2

您正在尝试从道具中添加onChangeText，同时必须在道具加载时使用默认道具，以便完全满足您的要求

InputField.defaultProps = {
   onChangeText: () => {}
}

从数组映射

2 个答案: