连锁选择

Question

我正在使用React + Redux +路由器堆栈，此时我已经有了一个简单的React组件，在这里我尝试开发一个带有这行为示例的链接选择的选择。

实际上，我的组件可以很容易地使用这个变量：

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容器示例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? */}
    ...
/>