So legen Sie einen Standardwert in React-Select fest

Ich habe ein Problem mit React-Select. Ich verwende die Redux-Form und habe meine React-Select-Komponente mit der Redux-Form kompatibel gemacht. Hier ist der Code:

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}
        selectedValue={props.selectedValue}
    />
);

und hier wie ich es rendere:

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

Das Problem ist jedoch, dass mein Dropdown-Menü nicht den von mir gewünschten Standardwert hat. Was mache ich falsch? Irgendwelche Ideen?

Ich denke du brauchst so etwas:

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

Ich habe den Parameter defaultValue verwendet. Im Folgenden finden Sie den Code, mit dem ich einen Standardwert erreicht habe. Außerdem wird der Standardwert aktualisiert, wenn eine Option aus der Dropdown-Liste ausgewählt wird.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

Wenn Sie kommen hier habe reagieren Auswahl v2, und immer noch Probleme - Version 2 jetzt akzeptiert nur ein Objekt als value, defaultValueusw.

Versuchen Sie also value={{value: 'one', label: 'One'}}, statt nur zu verwenden value={'one'}.

Ich hatte einen ähnlichen Fehler. Stellen Sie sicher, dass Ihre Optionen ein Wertattribut haben.

<option key={index} value={item}> {item} </option>

Passen Sie dann den ausgewählten Elementwert zunächst an den Optionswert an.

<select 
    value={this.value} />

Wenn Sie die Antwort von @ isaac-pak erweitern und Ihren Standardwert in einer Requisite an Ihre Komponente übergeben möchten, können Sie ihn in der Lifecycle-Methode componentDidMount () im Status speichern, um sicherzustellen, dass der Standardwert beim ersten Mal ausgewählt wird.

Hinweis: Ich habe den folgenden Code aktualisiert, um ihn vollständiger zu gestalten und eine leere Zeichenfolge als Anfangswert für den Kommentar zu verwenden.

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Ich habe das einfach selbst durchgearbeitet und mich dafür entschieden, den Standardwert für die Reduzierer-INIT-Funktion festzulegen.

Wenn Sie Ihre Auswahl mit Redux binden, lösen Sie sie am besten nicht mit einem ausgewählten Standardwert, der nicht den tatsächlichen Wert darstellt, sondern legen Sie den Wert beim Initialisieren des Objekts fest.

Wenn Sie kein Redux-Formular verwenden und den lokalen Status für Änderungen verwenden, sieht Ihre React-Select-Komponente möglicherweise folgendermaßen aus:

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

Verwenden Sie defaultInputValue-Requisiten wie folgt:

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

Weitere Informationen finden Sie unter https://www.npmjs.com/package/react-select

Wenn Ihre Optionen so sind

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

Sie {props.input.value}sollten mit einem der 'value'in Ihrem übereinstimmen{props.options}

Das heißt, props.input.valuesollte entweder 'one'oder sein'two'

Automatische Auswahl des Werts von in select.

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Verwenden Sie das value-Attribut im select-Tag

value={this.state.contactmethod || ''}

Die Lösung funktioniert für mich.

1. Erstellen Sie im Konstruktor eine Statuseigenschaft für den Standardoptionstext
   • Machen Sie sich keine Sorgen über den Standardoptionswert
2. Fügen Sie der Renderfunktion ein Options-Tag hinzu. Nur mit Status und ternärem Ausdruck anzeigen
3. Erstellen Sie eine Funktion, die behandelt werden soll, wenn eine Option ausgewählt wurde

4. Ändern Sie den Status des Standardoptionswerts in dieser Ereignishandlerfunktion in null

   Class MySelect extends React.Component
   {
       constructor()
       {
           super()
           this.handleChange = this.handleChange.bind(this);
           this.state = {
               selectDefault: "Select An Option"
           }
       }
       handleChange(event)
       {
           const selectedValue = event.target.value;
           //do something with selectedValue
           this.setState({
               selectDefault: null
           });
       }
       render()
       {
           return (
           <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
               {this.selectedValue}>
            {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
               {'map list or static list of options here'}
           </select>
           )
       }
   }
   

Ich benutze häufig so etwas.

Standardwert von Requisiten in diesem Beispiel

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}

Sie müssen eine gründliche Suche durchführen, wenn Sie Gruppen in Optionen verwenden:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};