首页 文章

接线使用React / Redux选择Combobox而不发送调度事件

提问于
浏览
0

我试图在我的React网站中使用Redux状态存储初始化一个选择框 . 状态存储包含可用选项列表和表示当前所选选项的值 .

当更改选择框时,我希望它向Redux商店发出一个动作事件,告诉它根据选择的内容执行一些工作 .

但是,当我尝试更改UI中的选择组合框时,它会给出错误

TypeError:无法读取未定义的属性'props'./src/GroupingSelector.tsx.GroupingSelector.onGroupingChange C:/src/GroupingSelector.tsx:32 29 | 30 | private onGroupingChange(e:any){31 | const = e.target; 32 | this.props.dispatch({type:'UPDATEGROUPING',selectedOption:value}); 33 | } 34 | 35 |

我的课

import * as React from 'react';
import { connect } from 'react-redux';
import './App.css';
import IAction from './interfaces/IAction';

interface IGroupingProps {
    groupingOptions : string[],
    selectedGroupingOption : string,
    dispatch : any
  }

class GroupingSelector extends React.Component<IGroupingProps, {}> {

      public render() {

       return (
        <div className="Grouping-selector">
            <div className="Horizontal-panel-right Grouping-search-combo">
                <select onChange={this.onGroupingChange}>
                    {this.props.groupingOptions.map((name, index)=> 
                        <option key={index}>{name}</option>
                    )}
                </select>
            </div>
            <div className="Content Horizontal-panel-right">
                Group by
            </div>            
        </div>);
    }

    private onGroupingChange(e: any) {
         const { value } = e.target;
         const action: IAction<string> = {type: "UPDATEGROUPING", payload: value};
         this.props.dispatch(() => action);
      }    
}

function mapStateToProps(state: any) {
    return {
        groupingOptions: state.groupingOptions,
        selectedGroupingOption: state.selectedGroupingOption,
    };
  }    

export default connect(mapStateToProps)(GroupingSelector);

任何人都可以建议这有什么问题吗?

1 回答

  • 0

    你必须派遣一个功能 .

    this.props.dispatch(() => { type: 'UPDATEGROUPING', selectedOption: value });
    

    虽然您应该考虑使用和action.js文件并导入它 .

    action.js

    export const updateGrouping = (selectedOption) => {
      type: 'UPDATEGROUPING', 
      selectedOption
    }
    

    你的班

    this.props.dispatch(updateGrouping(value))
    

相关问题