从React中的菜单项中的onclick事件更新状态

时间:2018-08-17 01:02:51

标签: reactjs redux onclick action reducers

每次尝试单击新菜单项时,我都试图更新页面视图。我正在从数据库中提取这些菜单项并映射它们,然后将它们列出在下拉菜单中。

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>上,但这使我出错。现在它什么也没做。

0 个答案:

没有答案