如何用 redux 形式解决这个问题？它显示语法错误

Question

我们将为所有应用程序的表单使用 redux 表单。该应用程序可能有 5 种不同的形式用于不同的目的。第一种形式的问题在于它显示语法错误。但在实现 redux 表单之前，它使用相同的语法。这段代码有什么问题？

import React, {Component} from "react";
import {Text, Image, KeyboardAvoidingView, Platform,View} from "react-native";
import {
  Content,
  Form,
  Item,
  Input,
  Icon,
  Button,
  ListItem,
  Row,
  Col,
  Grid,
  Toast,
  Container,
  Left,
  Right,
  Body


} from "native-base";
import styles from "../styles/formstyle";
import { Field, reduxForm } from "redux-form";

const required = value => (value ? undefined : "Required");
const maxLength = max => value => (value && value.length > max ? `Must be ${max} characters or less` : undefined);
const maxLength15 = maxLength(15);
const minLength = min => value => (value && value.length < min ? `Must be ${min} characters or more` : undefined);
const minLength8 = minLength(8);
const email = value =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address" : undefined;
const alphaNumeric = value => (value && /[^a-zA-Z0-9 ]/i.test(value) ? "Only alphanumeric characters" : undefined);

class SigninScreen extends Component {
  static navigationOptions = {
    gesturesEnabled: false,
  };

  renderInput({ input, label, type, meta: { touched, error, warning } }) {
    return (
      <Item style={styles.item}
       error={error && touched}
                >
                <Icon
                  active
                  name="mail"
                  style={styles.icon}
                />
                <Input
                {...input.name="email"}
ref={c => (this.textInput = c)}
                  placeholder="Email"
                  placeholderTextColor="#a4916d"
                  style={styles.input}
                />
              </Item>
                     <Item style={styles.item}  error={error && touched}>

                <Icon
                  active
                  name="lock"
                  style={styles.icon}
                />
                <Input
                  {...input.name="password"}
ref={c => (this.textInput = c)}

                  secureTextEntry={true}
                  placeholder="Password"
                  placeholderTextColor="#a4916d"
                  style={styles.input}
                />
              </Item>
    );
  }



    login() {
    if (this.props.valid) {
      this.props.navigation.navigate("Drawer");
    } else {
      Toast.show({
        text: "Enter Valid Username & password!",
        duration: 2000,
        position: "top",
        textStyle: { textAlign: "center" },
      });
    }
  }

  render() {


    return (
      <Image style={background.img} source={require("../img/cover.jpg")}>
          <Container  style={styles.content}>

              <Form>
        <Field name="email"

               validate={[email, required]} />
        <Field
          name="password"
          component={this.renderInput}
          validate={[alphaNumeric, minLength8, maxLength15, required]}

        />
      </Form>
            <ListItem
              style={styles.list}
            >
            <Left>
                    <Button
                      primary
                      full
                      style={{width:"90%"}}
                      onPress={() => this.props.navigation.navigate("Signup")}
                    >

                      <Text style={{color: "#0dc49d"}}>fb</Text>
                    </Button>
                </Left>
                <Body/>
                <Right>
                    <Button
                      danger
                      full

                      onPress={() =>
                        this.props.navigation.navigate("Forgetpass")}
                    >

                      <Text style={{color: "#0dc49d"}}>google</Text>
                    </Button>
            </Right>
            </ListItem>
            <Button
              full
              style={{backgroundColor: "#0dc49d", width:"90%"}}
            onPress={() => this.login()}
            >
              <Text style={{color:"#ffffff"}}>Sign In</Text>
            </Button>
          </Container>

      </Image>
    );
  }
}

export default reduxForm({
  form: 'test'
})(SigninScreen)

它说 JSX 元素必须被包裹一个封闭标签。 Eslint 显示了 renderinput 中的第二个组件。我将它与原生基础一起使用。什么会导致此错误？另外，您能否检查一下 renderinput 和 fields 组件中的通信是否正确？我不确定在解决语法错误后这段代码是否可以工作:(

提前致谢！

Answer 1

renderInput 方法返回两个不同的项目。您需要像错误所说的那样将它们包装成一个单独的包装组件。

示例

  renderInput({ input, label, type, meta: { touched, error, warning } }) {
    return (
      <View>
        <Item style={styles.item} error={error && touched}>
          <Icon active name="mail" style={styles.icon} />
          <Input {...input.name="email"} ref={c => (this.textInput = c)} placeholder="Email" placeholderTextColor="#a4916d" style={styles.input} />
        </Item>
        <Item style={styles.item}  error={error && touched}>
          <Icon active name="lock" style={styles.icon} />
          <Input {...input.name="password"} ref={c => (this.textInput = c)} secureTextEntry={true} placeholder="Password" placeholderTextColor="#a4916d" style={styles.input} />
        </Item>
      </View>
    );
  }