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

Question

我使用 MDBootstrap 作为我的前端 CSS 框架和 redux 表单来轻松进行表单控制。

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

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

这是使用 Redux 表单 Field 组件时的结果

我不确定这个问题是如何以及为何发生的。控制台中没有错误，所有 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") 来 react 导致样式错误的字段。添加正确的类型后，一切正常。

工作 Redux 表单字段示例:

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