如何创建Redux形式的可重用字段组件？

Question

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

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

有什么想法可以实现吗？ 顺便说一句，我正在使用material-ui

编辑：提供更好的方法，例如考虑使用material-ui工具栏

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

我的工具栏包含一个selectField，textField，Toggle按钮，它们可能有几种形式。 在我的应用程序中，我希望将此工具栏保留在我在应用程序中创建对象的所有表单中，因此我希望将此工具栏包含在所有表单中。 在下面的答案之后，我尝试了类似下面的脏东西。

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>

但是在提交时，我得到的是主题字段的值，而不是基本栏的值，任何建议或方法都将不胜感激。

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道具映射到您的组件，请使用一个函数，然后您可以根据需要以多种形式导出和重用该函数。

// 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>