相关疑难解决方法(0)

如何将任何类型的CSS应用于redux-form Field组件？className和class被静默忽略:

        <div>
          <label>Name</label>
          <div>
            <Field
              className="form-input"
              name="formContactName"
              component="input"
              type="text"
              placeholder="Person to contact"
            />
          </div>
        </div>

我能够通过创建自定义组件来应用样式:

        <div>
          <label>Name</label>
          <div>
            <Field
              name="formContactName"
              component={ customInput }
            />
          </div>
        </div>

但这是一个主要的PITA,并且在很大程度上否定了首先使用redux-form的好处.我错过了什么吗？注意我直接在自定义组件中添加了className分配 - 我意识到我可以通过Field中的道具发送它们.

我尝试了input全局设置样式,但也被忽略了.redux-form网站文档告诉你使用该装备你需要知道的一切,但没有提到我能看到的CSS ......

谢谢,

JB

编辑:这不是重复 - 指向的答案使用自定义输入组件.如上所述,我可以让它工作,但那时首先真的不需要redux-form.

@Jay:通过从在线文档中获取代码,我能够使用自定义组件:

class MyCustomInput extends Component {
  render() {
    const { input: { value, onChange } } = this.props
    return (
      <div>
        <label htmlFor="formContactName" className="col-sm-2 control-label">Name:</label>
        <div className="col-sm-10">
          <input
            id="formContactName"
            placeholder="Person to contact"
            className="form-control"
            type="text"
          />
        </div>
      </div>
    )
  }
} …

我无法设置w/redux-form表单的默认值.我正在寻找的结果是一个可编辑的文本字段,以便稍后提交到数据库.即更新电子邮件地址.

我已经尝试将表单中的属性设置为value或defaultValue.注意:我已经重复使用了代码,只需一个"名称"字段就可以更容易阅读.

任何见解都表示赞赏!

  import React, { Component, PropTypes } from 'react';
    import { reduxForm } from 'redux-form';
    export const fields = [ 'name']

        //(container) page-profile.js

            import React, { Component } from 'react';
            import { connect } from 'react-redux'; 
            import Profile from '../components/Profile';

            class PageProfile extends Component {

              render() {
                return (
                 <Profile 
                    userInfo = {this.props.userInfo}
                 />
                )
              }
            }
            // requiring this page before rendering -- breaks page
            PageProfile.propTypes = {
               //userInfo: PropTypes.object.isRequired
            }

            function mapStateToProps(state) …