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 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表单字段组件:) 在这里，我优雅的解决方案：

ImageSearch X, Y, x1, y1, x2, y2, *32 deck\5d.png
                                  ^^^

如何使用？

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

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

2 个答案: