Question

我试图在React中创建一个表单，我对它很新，并且我结合了两个我看过的教程。但是，当我尝试制作表格时，它并没有显示出来。

formField.js：

export default [
{ label: 'Title', name: 'contactTitle' },
{ label: 'First Name', name: 'contactName' },
{ label: 'Last Name', name: 'contactLastName' },
{ label: 'Email', name: 'contactEmail' },
{ label: 'Telephone', name: 'contactTelephone' },
{ label: 'Address', name: 'contactAddress' },
];

然后我有一个ContactField.js我在这里创建了一个单独的字段：

import React from 'react';

export default ({input, label, meta: {error, touched}}) => {
  return (
    <div>
      <label>{label}</label>
      <input {...input} style={{marginBottom: '5px'}} />
      <div className="red-text" style={{marginBottom: '20px'}}>
        {touched && error}
      </div>
    </div>
  )
}

最后我有组件ContactNew.js。只有我的h2和button正在页面上呈现，整个表单都缺失了：

import _ from 'lodash';
import React, { Component } from 'react';
import { Field, Form, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import ContactField from './ContactField';
import { createContact } from '../../actions';
import formField from './formField';
import validateEmails from '../../utils/validateEmail';

class ContactNew extends Component {
    renderFields() {
        return _.map(formField, ({ label, name }) => {
            <Field
                key={name}
                component={ContactField}
                type="text"
                label={label}
                name={name}
            />;
        });
    }
    onSubmit(values) {
        this.props.createContact(values, () => {
            this.props.history.push('/');
        });
    }

    render() {
        const { handleSubmit } = this.props;
        return (
            <div>
                <h3>Add new contact:</h3>
                <Form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    {this.renderFields()}
                    <button className="waves-effect waves-light btn blue darken-1" type="submit">Save</button>
                </Form>
            </div>
        );
    }
}

function validate(values) {
    const errors = {};

    errors.contactEmail = validateEmails(values.contactEmail || '');

    _.each(formField, ({ name }) => {
        if (!values[name]) {
            errors[name] = 'You must provide a value';
        }
    });
    return errors;
}

export default reduxForm({
    validate,
    form: 'contactForm',
    destroyOnUnmount: false
})(connect(null, { createContact })(ContactNew));

在actions我有：

export function createContact(values, callback) {
  const request = axios.post('/api/client', values)
    .then(() => callback());


  return {
    type: CREATE_CONTACT,
    payload: request
  }
}

我不知道是否只有一个小错误没有呈现我的表单，或者所有错误都是错误的。我在控制台中没有收到任何错误。

Answer 1

renderFields上有语法错误。您没有从map返回创建的组件，并且在;的末尾有一个额外的FormField（分号）。请在lodash docs

查看如何使用map

应该是这样的

renderFields() {
  return _.map(formField, ({ label, name }) => (
    <Field
      key={name}
      component={ContactField}
      type="text"
      label={label}
      name={name}
    />
  ));
}

如何在React中呈现表单？

1 个答案: