Mehrere Kontrollkästchen in der redux-form

Ich würde gerne Fragen, hier ist das Szenario. Ich habe dies mehrere Kontrollkästchen, aber mein problem ist immer wenn ich das Häkchen einer checkbox, alle 4 Checkboxen ausgewählt sind. Und auch, warum ist es der Wert der checkbox nur true oder false.Hier ist meine checkbox:

<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>
  • ReduxForm nicht unterstützt, checkbox-group. Dieser kann Ihnen helfen, als workaround.
  • Hi @JyothiBabuAraja haben Sie ein Beispiel, wie es zu implementieren. Ich bin ganz neu reagieren :D. Danke!
  • Check dieser und Beispiel
  • Ja, ich habe versucht, aber es ist ein Fehler wie es aussieht ist es mit der v5.5.3 der redux-form, und ich bin mit der v6.5.0
  • Ich bin auch auf die Reise gehen, dieses problem zu lösen :-), aber immer noch auf eine konkrete Antwort.
  • Ich löste das Problem mit dieser. prüfen Sie diesen link aus github.com/erikras/redux-form/issues/...

InformationsquelleAutor Sydney Loteria | 2017-03-16
  1. 15

    Für Leute wie mich, die neue redux und reagieren, können finden Sie den original-code erwähnt hier verwirrend. Ich modifiziert und Umgerechnet auf eine ES6-Klasse. Ich habe auch Entfernt bootstrap-Validierung und machte es einfach zu Debuggen.

    Hier ist der geänderte code

    import React from 'react';

class CheckboxGroup extends React.Component {

    checkboxGroup() {
        let {label, required, options, input, meta} = this.props;

        return options.map((option, index) => {
            return (
            <div className="checkbox" key={index}>
                <label>
                    <input type="checkbox"
                           name={`${input.name}[${index}]`}
                           value={option.name}
                           checked={input.value.indexOf(option.name) !== -1}
                           onChange={(event) => {
                               const newValue = [...input.value];
                               if (event.target.checked) {
                                   newValue.push(option.name);
                               } else {
                                   newValue.splice(newValue.indexOf(option.name), 1);
                               }

                               return input.onChange(newValue);
                           }}/>
                    {option.name}
                </label>
            </div>)
        });
    }

    render() {
        return (
            <div>
                {this.checkboxGroup()}
            </div>
        )
    }
}


export default CheckboxGroup;

    Verwendung: 

    let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]     
<Field name="roles" component={CheckboxGroup} options={optionsList} />
    • Vielen Dank @aftab-naveed ! Was bedeutet die optionsList Objekt Aussehen ? Ich versuche es zu implementieren, ohne Erfolg.
    • lassen Sie optionList = {id: 1, name: 'Optoin1', id: 2, name: 'Option 2'}
    • Aber gut, touch-Ereignis nicht für mich arbeiten, es ist immer falsch. Nach dem ersten Formular Absenden, berührt Ereignis starten brennen. const {Optionen, name, Eingabe, meta: { berührt, Fehler }} = diese.Requisiten; const hasError = berührt && error;
    • Funktioniert Super; aus irgendeinem Grund musste ich eine änderung vornehmen zu newValue: const newValue = [...input.value] || []
    • muss ich jQuery dafür?
    • Nein, Sie brauchen nicht jQuery für diese 🙂

    InformationsquelleAutor Aftab Naveed
  2. 0

    Hinzufügen einige Stil zu @Aftab Naveed ich wickelte meine Checkboxen in ein label mit diesen Klassennamen statt, und Sie endete echt hübsch und einfacher geklickt:

    <label key={option.name} className="form-check-label" style={ {"fontSize": "1.5em"} }>
          <input ... />
            <span>{option.name}</span>
          </label>

    ich nicht verwenden, bootstrap, ich denke es ist eine redux form Sache mit className "form-check-label"

    InformationsquelleAutor Maddocks
Schreibe einen Kommentar