redux-formで再利用可能なフィールドコンポーネントを作成するにはどうすればいいですか？

Question

私は2-3のフィールドを再利用しているので、私のアプリケーションの他のフォームです。だから私はコンポーネントとしてそれらのフィールドを作成して、私が他のフォームを再利用できるようにしたかったのです。還元型は文句を言っている

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

どのように私はそれを達成することができますか？私は素材を使用しています。

EDIT：

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

材料-UIツールバーを考える私のツールバーは、フォームのカップルかもしれボタントグルselectField、テキストフィールド、から構成されています。私のアプリケーションでは、アプリケーションでオブジェクトを作成するすべてのフォームにこのツールバーを残したいので、このツールバーをすべてのフォームに含める必要があります。以下の答えの後、私は以下のような汚いものを試しました。

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とラップすることができます。ドキュメントの使用例を参照してください：

MyCustomInputカスタム、一般的な構成要素である

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

import MyCustomInput from './MyCustomInput' 

... 

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

。

フィールド・プロップをコンポーネントにマップするカスタム・ロジックがある場合は、必要に応じてエクスポートして再利用できる関数を使用します。

// 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のフォームフィールドコンポーネントへようこそ:) ここに私のエレガントsoloution：使用する方法

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>