Default-Wert reagieren-wählen Sie

ich habe eine reagieren-Komponente auswählen, die ich machte, kompatibel mit redux-form. Meine SelectInput Komponente ist:

const MySelect = props => (
  <Select
    {...props}
    value={props.input.value}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

und ich render es in meiner Komponente die eine form

<div className="select-box__container">
                <Field
                  id="side"
                  name="side"
                  component={SelectInput}
                  options={sideOptions}
                  value="Any"
                  clearable={false}
                  //placeholder="Select Side"
                />
              </div>

Habe ich auch die ursprünglichen Werte an den container, so wie der Staat für diese Komponente hat, einen anfänglichen Wert und es funktioniert. Mein problem ist, dass ich beim Rendern der Komponente der erste Wert nicht in der Auswahl-box, und es ist leer. Warum ist dies geschehen?

  • was u r erwarten, Wert 'any' sollte ausgewählt werden Wählen Sie ?
  • genau, ich möchte zum testen meiner wählen Sie mit einen Wert zu sehen, ob es gemacht wird, mit meiner Komponente, aber das ist es nicht.
  • probieren Sie es aus: tauschen Sie diese zwei Zeilen, statt {...props} value={props.input.value} verwenden: value={props.input.value} {...props} in Komponente Wählen.
  • hat nicht funktioniert
  • Irgendwelche anderen Ideen? Ich denke der Bearbeitung meiner selectInput wie diese <Select {...props} tempValue={props.input.Wert} {tempValue !== undefined ? Wert={tempValue} : value="Any" } // Wert={props.input.Wert} onChange={Wert => props.input.onChange(Wert)} / / " onBlur={() => props.input.onBlur(Requisiten.input.Wert)} options={props.Optionen} Platzhalter={props.Platzhalter} // defaultValue="Keine" /> aber hat nicht funktioniert...
  • Mögliche Duplikate von Wie man ein default-Wert reagieren-select

InformationsquelleAutor user7334203 | 2017-04-07
  1. 3

    Was ist die Form Ihrer options? - Häufig ist es ein array von Objekten mit einem Wert und einem label-Eigenschaft:

    [
  { label: "I like", value: "icecream" },
  { label: "Any", value: "Any" }
]

    Können Sie die anfängliche value prop reagieren-wählen Sie mit der Einstellung einer der Werte im array der Optionen.
    Alternativ können Sie auch legen Sie es auf eine nicht vorhandene option, indem Sie ein Objekt mit einem label und einen Wert. Die label ist was angezeigt wird, als die value des wählen Sie. In der Tat ein wenig verwirrend, aber es macht irgendwie Sinn.

    TL;DR

    value={{ value: 0, label: 'Any' }} - wird den trick tun!

    Können Sie auch die anfangs-Wert auf einen Wert Ihrer Optionen, und es wird angezeigt. Das heißt, wenn Sie haben { value: "Any", label: "Any" } in deinen Optionen value={'Any'} anzeigen würde "Jeder" in der wählen Sie.

    Hoffe, das funktioniert für Sie!

    • Meine Optionen ist ein array von Objekten wie diesem:const sideOptions = [ { label: 'Irgendein', value: 'Any' }, { label: 'Kaufen', value: 'Kaufen' }, { label: 'Verkaufen', value: 'Verkaufen' } ];. Ich will von SelectInput zu sein label:Jedem Wert beliebig. Ich habe eingestellt, Wert={{ Wert=0, label='Alle' }}, aber es hat nicht funktioniert, schließlich
    • Um genauer zu sein sollte ich hinzufügen, initialValue = {props.initialValue } und dann in meine Komponente initialValue={{label: 'Wert: 'Any}}?
    • sorry für die verspätete Antwort! Sie können value prop reagieren-wählen Sie Ihren Initialen Wert. Es gibt keine initialValue stützen Sie reagieren-wählen. Hoffe das klärt die Dinge für Sie.
    • Hat dieser überhaupt für Sie arbeiten?
    • ja, aber das war für reagieren-wählen Sie 1.x und 2.x.
    InformationsquelleAutor RemEmber
  2. 2

    Lief in ein ähnliches Problem. Die Eingabe im Feld Wert wird ständig gelöscht, obwohl es richtig ist, übergeben. Sie können entweder erstellen Sie eine input Objekt, das einen Wert hat, der prop (und alle anderen benötigten Requisiten) oder verwenden Sie eine separate prop selectedValue in diesem Fall.

     <Field
  id="side"
  name="side"
  component={SelectInput}
  options={sideOptions}
  value="Any"
  clearable={false}
  selectedValue={this.props.myvalue}
 />

const MySelect = props => (
  <Select
   {...props}
   value={(props.input.value) ? props.input.value : props.selectedValue}
   onChange={value => props.input.onChange(value)}
   onBlur={() => props.input.onBlur(props.input.value)}
   options={props.options}
   placeholder={props.placeholder}
  />
);
    InformationsquelleAutor tmueller
Schreibe einen Kommentar