我正在使用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']
}
}
这样我就可以利用两个相互依赖的链接选择。
最佳答案
在您的 View 组件代码中:
顶部:
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? */}
...
/>
关于javascript - 链接选择的选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39894574/