从数组映射时如何调用 onChangeText 函数

Question

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

Failed prop type: The prop onChangeText is marked as required in InputField. but its value is undefined.

所以当我 console.warn 电子邮件和密码显示为空时。

这是我的代码

登录（屏幕）

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

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

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

Answer 2

几个小时后，我解决了这个问题。我只更改 SignIn Screen 中 state 中的 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) } ] };

从数组映射时如何调用 onChangeText 函数

How to call onChangeText function when mapping it from array

higher-order-functions

react-native