首页 > 解决方案 > 使用 useState 反应原生表单

问题描述

反应原生形式。保持相同的格式 React.useState 并更新输入。在反应中可以做到这一点。可以在本机反应中做吗?

 import React from "react";
import { View, StyleSheet } from "react-native";
import { Input, Text, Button } from "react-native-elements";
import Spacer from "../Spacer";
const RegisterScreen = () => {
  const [formData, setFormData] = React.useState({
    name: "",
    email: "",
    password: ""
  });
  const { name, email, password } = formData;

  const handleChange = name => e => {
    setFormData({ ...formData, [name]: e.target.value });
  };
  return (
    <View style={styles.container}>
      <Spacer>
        <Text h4 style={styles.header}>
          Register
        </Text>
      </Spacer>
      <Spacer>
        <Input
          label="Name"
          value={name}
          onChangeText={() => handleChange("name")}
        />
      </Spacer>
      <Spacer>
        <Input
          label="Email"
          value={email}
          onChangeText={() => handleChange("email")}
        />
      </Spacer>
      <Spacer>
        <Input
          label="Password"
          value={password}
          onChangeText={() => handleChange("password")}
        />
      </Spacer>
      <Spacer>
        <Button title="Sign Up" />
      </Spacer>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    marginBottom: 150
  },
  header: {
    textAlign: "center"
  }
});

export default RegisterScreen;

(反应原生形式。保持相同的格式 React.useState 并更新输入。在反应中可以做到。在反应原生中可以做到吗?)

标签: react-native

解决方案


是的!它应该可以正常工作!只需 import useState,您的代码中缺少它。


推荐阅读