redux-form V6 benutzerdefinierte Komponente

Question

Ich möchte benutzerdefinierte Komponente für Redux-Form V6 erstellen. Es sieht aus wie Schalter umschalten.

Komponente

import React, { Component } from 'react'; 

export default class ButtonSwitcher extends Component{ 
// props.buttons [{text: "Btn Text", value: "BtnValue"}] 
    render(){ 
    return (
     <div className="btn-group" style={{verticalAlign: 'top'}}> 
     {this.props.buttons.map((button, index)=>(
      <a href="#" key={index} onClick={this.props.onChange} className={(this.props.value === button.value) ? 'active btn btn-default' : 'btn btn-default'}>{button.text}</a> 
     ))} 
     </div> 
    ); 
    } 
} 

Ich benutze diese Komponente in meiner Form:

const renderButtonSwitcher = props => { 
    return (
    <ButtonSwitcher value={props.input.value} onChange={props.input.onChange} buttons={props.data} /> 
) 
}; 

<Field name="PODType" component={renderButtonSwitcher} data={[{text: '%', value: 'percent'}, {text: '$', value: 'amount'}]} /> 

Wie i-Taste Wert ausgewählt bekommen? Ich kann keine erweiterte Beispiele von redux-Form V6

onSubmit(data) { 
    console.log("onSubmit", data); 
} 

onSubmit zeigt leere Datenobjekt

Answer 1

finden Die Art und Weise Sie tun, das ist nicht die Art und Weise redux-Form funktioniert. Die <Field /> Komponente ist ein Wrapper für alle verschiedenen HTML-Formularfelder wie <input />, <textarea /> und so weiter. Diese Felder haben eine name und value Eigenschaft, die in Forms und auch in Redux-Form verwendet wird

Sie rendern <a />, die einfache Links sind, damit redux-form ihre Werte nicht erhalten/setzen kann.

Um Werte aus diesen Links zu erhalten, müssen Sie umgehen, wahrscheinlich mit einem versteckten Feld, das aktualisiert wird, wenn ein solcher Link angeklickt wird.

Answer 2

Ich finde die Lösung

Nun meine Komponente aussieht:

import React, { Component } from 'react'; 

export default class ButtonSwitcher extends Component{ 
    // props.buttons [{text: "Btn Text", value: "BtnValue"}] 

    onClick(value){ 
    this.props.onChange(value); 
    } 

    render(){ 
    return (
     <div className="btn-group" style={{verticalAlign: 'top'}}> 
     {this.props.buttons.map((button, index)=>(
      <a href="#" key={index} onClick={this.onClick.bind(this, button.value)} className={(this.props.value === button.value) ? 'active btn btn-default' : 'btn btn-default'}>{button.text}</a> 
     ))} 
     </div> 
    ); 
    } 
} 

Verwendung in Form Komponente:

const renderButtonSwitcher = props => { 
     return (
     <ButtonSwitcher {...props.input} buttons={props.data} /> 
    ) 
    }; 

<Field name="PODType" component={renderButtonSwitcher} data={[{text: '%', value: 'percent'}, {text: '₽', value: 'amount'}]} /> 

Ich finde this discussion und das gibt mir ein paar Ideen