Question

我正在尝试使用功能组件在React native中创建Login页面。但这是行不通的。一旦输入任何文本抛出错误。价值不变。

import React from "react";
import { View, Button, Text } from "react-native";
import Inputs from "../../utils/Form/Input";
const LoginForm = () => {
const [formData, setForm] = React.useState({
    email: {
      value: "",
      valid: false,
      type: "textinput",
      rules: {
        isRequired: true,
        isEmail: true
      }
    },
    password: {
      value: "",
      valid: false,
      type: "textinput",
      rules: {
        isRequired: true,
        minLength: true
      }
    }
  });
  const handleChange = () => {
    setForm({ ...formData });
    console.log(formData.email);
  };

  return (
    <View>
      <Text>Login</Text>
      <Inputs
        placeholder="Enter email address"
        placeholdercolor="red"
        autoCapitalize={"none"}
        keyboardType={"email-address"}
        onChangeText={value => handleChange("email", value)}
        value={formData.email.value}
        type={formData.email.type}
      />
      <Inputs
        placeholder="Password"
        placeholdercolor="red"
        autoCapitalize={"none"}
        type={formData.password.type}
        value={formData.password.value}
        onChangeText={value => setForm("password", value)}
      />
    </View>
  );
};

export default LoginForm;

实用程序文件

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

const Inputs = props => {
  let template = null;
  switch (props.type) {
    case "textinput":
      template = (
        <TextInput {...props} style={[styles.input, props.overrideStyle]} />
      );
      break;
    default:
      return template;
  }
  return template;
};
const styles = StyleSheet.create({
  input: {
    width: "100%",
    borderBottomWidth: 2,
    borderBottomColor: "blue",
    fontSize: 16,
    padding: 5,
    marginTop: 10
  }
});
export default Inputs;

Answer 1

您缺少handleChange函数中的参数。应该是

  const handleChange = (key, value) => {
    let data = formData;
    data[key].value = value;
    setForm(data);
    console.log(formData.email);
  };

Answer 2

您的handleChange更改功能不正确并产生错误，请将您的handle更改方法更改为此功能

const handleChange = (val, data) => {
    if (val === 'email') {
      setForm({
        ...formData,
        email: {
          ...formData.email,
          value: data,
        },
      });
    } else {
      setForm({
        ...formData,
        password: {
          ...formData.password,
          value: data,
        },
      });
    }
  };

并将密码输入的onChangeText属性更改为
onChangeText={value => handleChange('password', value)}

反应本机登录表单

2 个答案: