每次尝试单击新菜单项时,我都试图更新页面视图。我正在从数据库中提取这些菜单项并映射它们,然后将它们列出在下拉菜单中。
class AminoAcids extends Component {
componentDidMount() {
this.props.fetchMicros();
}
renderData() {
const { aminos } = this.props;
return aminos.map((micro, index) => {
return (
<option onClick={() =>
this.props.updateActiveResultView('aminoResults')} value={micro.value}
key={index}>{micro.name}</option>
)
})
}
render() {
return (
<select value={this.props.value} onChange={this.handleChange}>
<option value="" selected>--Amino Acids--</option>
{this.props.aminos && this.renderData()}
</select>
)
}
我的视图是Intro,Amino和抗氧化剂,现在它已设置在我的还原剂中的Intro上,因此,当我单击下拉菜单项之一时,我试图使其破坏Intro并切换到Amino。
减速器
const activeResultView = (state = 'Intro', action) => {
switch (action.type) {
case 'UPDATE_RESULT_VIEW':
return action.view;
default:
return state;
}
};
动作
export const updateActiveResultView = view => ({
type: 'UPDATE_RESULT_VIEW',
view,
});
我尝试将其放置在<select>
上,但这使我出错。现在它什么也没做。