Question

我在与React-native在一起时并没有做很多工作，但是在我的设置中，formik和react-native-elements没有任何帮助。我不确定我到底缺少什么。基本上，表单不能提交。我有一个可重复使用的按钮，并且输入组件由react native元素组成。表单未提交。出于好奇，我还尝试了RN的默认按钮来提交表单，但是它也不起作用。我的沙盒是here。

我的设置非常简单，如下所示。对于我确切缺少的内容，任何帮助都会很棒：

FormInput.js：

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Input } from "react-native-elements";

export default class FormInput extends Component {
  render() {
    let { name, ...rest } = this.props;

    return (
      <>
        <View>
          <Input name={name} {...rest} />
        </View>
      </>
    );
  }
}

FormButton.js

import React, { Component } from "react";
import { Button } from "react-native-elements";
export default class FormButton extends Component {

  render() {
    let { title, ...rest } = this.props;
    return (
      <>
        <Button title={title} {...rest} onPress={() => this.props.onPress} />
      </>
    );
  }
}

App.js：

import React, { Component, Fragment } from "react";
import { Alert, Button, Image, StyleSheet, Text, View } from "react-native";
import FormInput from "./components/forms/FormInput";
import FormButton from "./components/forms/FormButton";
import * as yup from "yup";
import { Formik } from "formik";

class App extends Component {
  handleSubmit = values => {

    console.log("submitted values ", values);
  };

  render() {
    return (
      <View style={styles.app}>
        <Formik
          initialValues={{
            name: ""
          }}
          onSubmit={values => {
            this.handleSubmit(values);
          }}
          validationSchema={yup.object().shape({
            name: yup
              .string()
              .min(3)
              .max(25)
              .required()
          })}
        >
          {({
            values,
            handleChange,
            errors,
            setFieldTouched,
            touched,
            isValid,
            handleBlur,
            handleSubmit
          }) => (
            <Fragment>
              <FormInput
                name="name"
                onChangeText={handleChange("name")}
                onBlur={handleBlur("name")}
                autoFocus
              />

              <Button
                onPress={() => handleSubmit}
                title="React Native Button"
              />
              <FormButton
                title="React native elements child button"
                onPress={() => handleSubmit}
              />
            </Fragment>
          )}
        </Formik>
      </View>
    );
  }
} 
export default App;

Answer 1

是否可以发布错误（如果存在）？并且您是否制定了一种提交按钮的方法，以便它可以传递值？

无法提交表格和反应本机元素

1 个答案: