web-dev-qa-db-fra.com

l'interface utilisateur sémantique réagit aux options sélectionnées par défaut dans la liste déroulante

Je veux les options sélectionnées par défaut dans mon dropdown. Le code ci-dessous fonctionne lorsque j'ajoute des options sélectionnées mais ne s'affiche pas avec les options sélectionnées par défaut:

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

J'ai essayé d'ajouter defaultSelectedLabel={this.state.selected}.

this.state.selected est un tableau d'options dont la valeur sélectionnée par défaut est true:

render() {
        return (
            <Form onSubmit={this.handleFormSubmit}>
                <Form.Dropdown
                  placeholder="Select Options"
                  fluid multiple selection
                  options={this.state.options}
                  onChange={this.handleMultiChange}
                  defaultSelectedLabel={this.state.selected}
                />
                <Button type="submit">Submit</Button>
            </Form>
        );
    }

mais je reçois l'avertissement suivant:

Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.

J'ai fait la même chose avec defaultValue prop mais j'ai eu la même erreur

Comment obtenir les options sélectionnées par défaut dans mon dropdown?

javascriptreactjssemantic-uisemantic-ui-react
9
user2456977

Tu n'étais pas loin du résultat.

Vous pouvez fournir un tableau de valeurs dans les accessoires defaultValue comme les documents ont dit .

defaultValue {number | string | arrayOf} Valeur initiale ou tableau de valeurs s'il est multiple.

Voici un exemple:

class YourComponent extends Component {
  componentWillMount() {
    this.setState({
      options: [
        {value:'1', text:'A'},
        {value:'2', text:'B'},
        {value:'3', text:'C'},
      ],
      selected: ['1', '2'], // <== Here, the values of selected options
    });
  }

  ...

  render() {
    return (
      <Form onSubmit={this.handleFormSubmit}>
        <Form.Dropdown
          placeholder="Select Options"
          fluid multiple selection
          options={this.state.options}
          onChange={this.handleMultiChange}
          defaultValue={this.state.selected} // <== here the default values
        />
        <Button type="submit">Submit</Button>
      </Form>
    );
  }
}

[~ # ~] modifier [~ # ~] : Voici un exemple en direct

14
Adrien Lacroix

Fonctionne également pour les sélections simples:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Form, Button } from 'semantic-ui-react';
import './style.css';

class App extends Component {
  componentWillMount() {
    this.setState({
      options: [
        {value:'1', text:'Lamborghini Aventador 2016'},
        {value:'2', text:'VW Beetle 1971'},
        {value:'3', text:'Ford Mustang'},
      ],
      selected: '1',
    });
  }

  render() {
    return (
      <div>
        <Form onSubmit={this.handleFormSubmit}>
          <Form.Dropdown
            placeholder="Select Options"
            defaultValue={this.state.selected}
            fluid selection
            options={this.state.options}
          />
          <Button type="submit">Submit</Button>
        </Form>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
0
Rastislav