web-dev-qa-db-fra.com

Comment utiliser un tableau comme option pour réagir au composant sélectionné

Si je veux remplacer les options

<option value="A">Apple</option>
<option value="B">Banana</option>

dans l'exemple donné en utilisant un tableau dans un fichier jsx react, comment dois-je procéder?

<select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
</select>

meilleures salutations

bleu

selectreactjs
18
bluelabelz

Parce que c'est juste du javascript, il y a un million de façons. La façon dont je prends habituellement est de mapper le conteneur pour générer les tripes. Une boucle for ou autre fonctionnerait également très bien.

var Answer = react.createClass({

    render: function() {

        var Data     = ['this', 'example', 'isnt', 'funny'],
            MakeItem = function(X) {
                return <option>{X}</option>;
            };


        return <select>{Data.map(MakeItem)}</select>;

    }

};

Ou dans es6 dans une réaction plus moderne, vous pouvez simplement

var Answer = props => 
    <select>{props.data.map((x,y) => <option key={y}>{x}</option>)}</select>;
27
John Haugeland

Vous devez généralement fournir une clé unique pour vous assurer que React peut identifier les articles, vous pouvez utiliser uuid pour ce faire ou une clé que vous avez en main, par ex.

  <Select name={field}>
    {FBButtons.map(fbb =>
      <option key={fbb.key} value={fbb.key}>{fbb.value}</option>
    )};
  </Select>
17
The Coder