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

Question

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

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 和 Antioxidants，现在它在我的减速器中设置在 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>但它给了我一个错误。现在它什么也没做。

标签： reactjsreduxonclickactionreducers