web-dev-qa-db-ja.com

反応選択コンポーネントのオプションとして配列を使用する方法

オプションを交換したい場合

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

特定の例では、react jsxファイルの配列を使用して、どのように進めますか？

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

宜しくお願いします

青い

selectreactjs
18
bluelabelz

それは単なるJavaScriptであるため、100万通りの方法があります。私が通常とる方法は、コンテナをマッピングして内臓を生成することです。 forループまたは何でも問題なく動作します。

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>;

    }

};

または、es6では、より現代的なリアクションで、次のことができます。

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

通常、一意のキーを指定してReactがアイテムを識別できることを確認する必要があります。これを行うにはuuidを使用できます。

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