wie man wiederverwendbare Feldkomponente in redux-Form schafft?

Question

Ich habe 2-3 Felder, die andere Formen meiner Anwendung wiederverwendet wird. Also wollte ich diese Felder als Komponente erstellen, damit ich meine anderen Formen wieder verwenden kann. aber redux-form beschwert sich das

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

Irgendwelche Ideen, wie ich es erreichen kann? BTW, ich benutze Material-Ui

EDIT: Bereitstellung einer besseren, z.B. das Material-ui-Symbolleiste betrachten

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

Meine Symbolleiste besteht aus einem SELECT, TextField- Toggle-Taste, die einige Formen können. In meiner App möchte ich diese Symbolleiste in allen Formularen beibehalten, in denen ich Objekte in meiner Anwendung erstelle, daher möchte ich diese Symbolleiste in alle Formulare einschließen. Nach der folgenden Antwort habe ich etwas Dreckiges wie unten versucht.

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; 

und einschließlich der Form wie unter

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

Aber vorlegen, bin ich die Werte für Betreff-Feld bekommen, aber nicht die BaseBar Werte wird irgendwelche Vorschläge oder Ansatz sehr geschätzt.

Answer 1

Der Fehler besteht darin, dass Sie versuchen, das Feld außerhalb des Kontexts eines verbundenen Reduxformulars zu verwenden.

Vielleicht könnten Sie Ihre gemeinsam nutzbare Komponente ohne die Komponente <Field> selbst erstellen und dann diese Komponente in so vielen Formularen verwenden, wie Sie benötigen, indem Sie sie mit Field umhüllen. Siehe Beispiel für die Verwendung in der Dokumentation:

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

import MyCustomInput from './MyCustomInput' 

... 

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

Wo MyCustomInput ist Ihre individuellen, gemeinsame Komponente.

Oder wenn Sie über benutzerdefinierte Logik verfügen, um Feldrequisiten Ihren Komponenten zuzuordnen, verwenden Sie eine Funktion, die Sie exportieren und in beliebig vielen Formularen wiederverwenden können.

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

Willkommen in wiederverwendbare redux Form Feldkomponente :) Hier meine eleganten 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} />; 

Wie man verwendet?

import Input from './Input'; 

<form> 
... 

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