鏈接選擇的選擇

Question

我正在使用React + Redux + Router堆棧，到目前爲止，我已經有了一個簡單的React組件，我正在嘗試使用this行爲示例開發鏈接選擇的選擇。

其實我的組件可以輕鬆地使用這個變量：

var VAR_OPTIONS_OLD = [ 
    {value: 1, name: '1'}, 
    {value: 2, name: '2'}, 
    {value: 3, name: '3'}, 
    {value: 4, name: '4'}, 
    {value: 5, name: '5'}, 
] 

凡成分是這一個：

<Field 
     type={Select} 
     options={VAR_OPTIONS_OLD} 
     optionValue="value" 
     id="someID" 
     class="col-12" 
     i18n={i18n.someID} 
/> 

現在，我想我都選擇消費這個變量：

var VAR_OPTIONS_NEW = { 
    optionA: { 
     name: 'Option A', 
     suboption: ['Suboption A1', 'Suboption A2', 'Suboption A3'] 
    }, 
    optionB: { 
     name: 'Option B', 
     suboption: ['Suboption B1', 'Suboption B2', 'Suboption B3'] 
    }, 
    optionC: { 
     name: 'Option C', 
     suboption: ['Suboption C1', 'Suboption C2', 'Suboption C3'] 
    } 
} 

這樣我就可以利用有兩個相互依賴的鏈接選擇。

來源：Var Container Example Gist

Answer 1

在你視圖組件代碼：

在頂部：

const _ = require('lodash'); 
const VAR_OPTIONS_NEW = ... // The one you provided. 

在渲染（）：

const firstValue = ... // this should come from your Store (e.g. this.props.firstValue). 
const secondValue = ... // this should come from a Store 

const firstOptions = _.map(VAR_OPTIONS_NEW, (v, k) => ({ value: k, name: v.name }); 

let secondOptions = []; 
if (VAR_OPTIONS_NEW[firstValue]) { 
    secondOptions = VAR_OPTIONS_NEW[firstValue].suboptions.map(
     (name, index) => ({ value: index, name: name }) 
    ); 
} 
... 
<Field 
    options={ firstOptions } 
    optionsValue={ firstValue } 
    onChange={/* is your onChange event connected to Store? */} 
    ... 
/> 
<Field 
    options={ secondOptions } 
    optionsValue={ secondValue } 
    onChange={/* is your onChange event connected to Store? */} 
    ... 
/>