如何在redux-form中创建可重用的字段组件？

Question

我有2-3个重复使用的字段是我的应用程序的其他形式。所以我想创建这些字段作为组件，这样我就可以重用我的其他表单。但是redux-form抱怨说

Error: Field must be inside a component decorated with reduxForm()

有什么想法吗?我怎么才能做到呢？顺便说一句，我正在使用material-ui

编辑:提供更好的，例如，考虑材料-ui工具栏

http://www.material-ui.com/#/components/toolbar

我的工具栏由一个selectField，textField，切换按钮组成，可能有几个表单。在我的应用程序中，我希望在应用程序中创建对象的所有窗体中都保留此工具栏，因此我希望在所有窗体中都包含此工具栏。在下面的回答之后，我尝试了一些下流的东西，如下所示。

class BaseBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
    constructor(props) {
        super(props);
        this.state = {
            value: 3,
            isGlueOpen: false,
        };
    }

    handleChange = (event, index, value) => {
        this.setState({value: value});
    }

  render() {
    return (
      <div>
          <Toolbar>
              <ToolbarGroup firstChild={true}>
                  <DropDownMenu value={this.state.value} onChange={this.handleChange}>
                      <MenuItem value={1} primaryText="All Broadcasts" />
                      <MenuItem value={2} primaryText="All Voice" />
                      <MenuItem value={3} primaryText="All Text" />
                      <MenuItem value={4} primaryText="Complete Voice" />
                      <MenuItem value={5} primaryText="Complete Text" />
                      <MenuItem value={6} primaryText="Active Voice" />
                      <MenuItem value={7} primaryText="Active Text" />
                  </DropDownMenu>
              </ToolbarGroup>
              <ToolbarSeparator />
              <ToolbarGroup>
                  <ToggleButton onChange={this.props.glueToggle}/>
              </ToolbarGroup>
          </Toolbar>
      </div>
    );
  }
}


export default BaseBar;

包括下面这样的表单

 <form onSubmit={handleSubmit}>
          <div>
              <Field
                  name="basebar"
                  component={BaseBar}
                  label="project"
              />
          </div>
          <div>
              <Field
                  name="subject"
                  component={renderTextField}
                  label="subject"
              />
          </div>
   </form>

但是在提交时，我得到的是主题字段的值，而不是basebar的值，任何建议或方法都非常感谢。

Answer 1

错误是您试图在连接的Redux表单的上下文之外使用该字段。

也许您可以在不使用<Field>组件本身的情况下创建您的可共享组件，然后用Field包装它，以所需的任意形式使用该组件。请参阅文档中的示例用法：

http://redux-form.com/6.8.0/docs/api/Field.md/#usage

import MyCustomInput from './MyCustomInput'

...

<Field name="myField" component={MyCustomInput}/>

其中MyCustomInput是您的自定义通用组件。

或者，如果您有自定义逻辑来将Field props映射到您的组件，那么可以使用一个函数，然后您可以根据需要以任意多的形式导出和重用该函数。

// this is your custom component now
export const renderMyCustomField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text"/>
      {field.meta.touched && field.meta.error && 
       <span className="error">{field.meta.error}</span>}
    </div>
  )
...
//which you can then import in your forms
import { renderMyCustomField } from '...'

// inside your render() method
<Field name="myField" component={renderMyCustomField}/>

Answer 2

欢迎使用可重用的redux表单字段组件:)这里是我优雅的解决方案：

import React from 'react';
import { string, object } from 'prop-types';
import { Field } from 'redux-form/immutable';

const Input = ({
  input,
  meta: { touched, error },
  ...rest
}) => (
  <div>
    <input
      {...input}
      {...rest}
    />
    {touched && error && <span>{error}</span>}
  </div>
);

Input.propTypes = {
  input: object.isRequired,
  meta: object.isRequired,
  type: string.isRequired
};

Input.defaultProps = {
  input: null,
  meta: null,
  type: 'text'
};

export default props => <Field {...props} component={Input} />;

如何使用？

import Input from './Input';

<form>
...

<Input
  autoComplete="off"
  name="email"
  placeholder="Email"
  type="email"
/>
...
</form>