Question

我正在使用MDBootstrap作为我的前端CSS框架和redux表单，以便于表单控制。

我遇到的问题是元素样式/设计与最初在静态html页面中创建的不同。

这是原始的HTML静态页面设计：

这是使用Redux表单字段组件

时的结果

我不确定此问题是如何以及为何发生的。控制台中没有错误，所有CSS / JS都以完全相同的方式加载：

Html静态页面资源：

<link rel="stylesheet" type="text/css" href="http://booking.dev/all-b46c73cdcb.css">
<script src="http://booking.dev/all-fad333e91d.js"></script>

Redux页面资产：

<link rel="stylesheet" type="text/css" href="http://booking.dev/all-b46c73cdcb.css">
<script src="http://booking.dev/all-fad333e91d.js"></script>

<!-- redux/webpack JS -->

<script async="" src="http://booking.dev/dist/bundle.js"></script>

这是我正在使用的代码：

字段组件

export const renderInput = field => {
return (
<div className= "col-md-4">
   <div className="md-form">
      <span className="prefix"><i className={field.icon}></i></span>
      <input
      {...field.input}
      type={field.type}
      className={`form-control ${field.meta.touched && field.meta.invalid ? 'invalid' : 'valid'}`}
      />
      <label id={field.input.name + 'Label'} htmlFor={field.input.name} className={field.meta.touched ? 'active' : ''} data-error={field.meta.error}
      data-success="">{field.label}
      </label>
   </div>
</div>
);


}

表单部分：

import React, {Component} from 'react';
import {Field} from 'redux-form'

import {renderInput} from '../../components/SingleInput'

export default class BookerInformation extends Component {

render() {
    return <div className="booker-form">
        <div className="thumbnail thumbnail-full cardbox booker-info">
            <div className="caption">
                <h4>Booker information</h4>
                <div className="row">
                    <Field name="fullName" classname="col-md-4" icon="icon-User" component={renderInput}
                           label="Full Name"/>
                    <Field name="phone" classname="col-md-4" component={renderInput} icon="icon-Phone"
                           label="Phone"/>

                </div>
                <div className="row">

                    <Field name="email" classname="col-md-4" component={renderInput} icon="icon-Email"
                           label="E-mail"/>
                </div>

                <div className="row text-center">
                    <button type="button" className="btn btn-continue waves-effect waves-light">Continue</button>
                </div>

            </div>
        </div>
    </div>
}
}

静态html表单元素：

<div class="col-md-4">

   <div class="md-form">
      <span class="prefix"><i class="icon-User"></i></span>
      <input type="text" id="name" class="form-control validate">
      <label for="name" data-error="wrong" data-success="right" class="">Full name</label>
   </div>
</div>

Answer 1

这是我的错误。我忘了添加type（type =“text”）来反应导致不正确样式的字段。添加正确类型后，一切正常。

使用Redux表单字段示例：

 <Field name="fullName" classname="col-md-4" type="text" icon="icon-User" component={renderInput}
       label="Full Name"/>

Redux表单不使用预加载的CSS / JS

1 个答案: