如何創建REDX格式的可重用字段組件？

Question

我有2-3個重用的字段是我的應用程序的其他形式。所以我想創建這些領域作爲組件，以便我可以resuse是我的其他形式。但還原形式抱怨

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

任何想法我怎麼能實現它？順便說一句，我正在使用素材-iD

編輯：提供更好的例如考慮材料的UI工具欄

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

我的工具欄由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包裝它。見例如使用文檔中：

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的表單字段部件:) 這裏我優雅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>