javascript - this.props.filterUser 不是一个函数

Question

我正在尝试将数据从 child 传递给 parent ，但是我被抛出异常this.props.filterUser 不是一个函数

我引用的是: ReactJS with ES6: this.props is not a function when I communicate two components

未捕获类型错误:this.props.filterUser 不是函数

class Mobile extends React.Component {

    constructor() {
        super();
        this.legendBtnHandler = this.legendBtnHandler.bind(this);
        this.state = {
            mobileExtentions: '',
            legendInfo: '',
            buttonName: 'test'
        }
    };

 componentWillMount(){
        const listItems = mobileExt.map((ext) =>
            <p>
                <RaisedButton label={ext.name} secondary={true} id="mobileBtn" onClick={() => this.legendBtnHandler(ext.name)}/>
            </p>
        );

        this.setState({mobileExtentions: listItems});
    };


    legendBtnHandler(btnName){
        this.setState({buttonName: btnName});
        Store.buttonName = btnName;
        this.props.filterUser("test");
    };


    render(){
        const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
        return(
            <div>
               <DraggableCard
                   mobileExtentions = { this.state.mobileExtentions }
                   legendInfo = { mobileExt[0].legendInfo }
               />
            </div>
        )
    }
};

父级

class MapClass extends React.Component {
    constructor(props) {
         super(props);
         this.filterUser = this.filterUser.bind(this);

            this.state =  {
                filter: ''
                //btnName: Legend.props.test
            }

        }

     filterUser(filterValue){
            alert(filterValue)
            this.setState({
                filter: filterValue
            });
        }

    render(){
        return(
           <Mobile filterUser={this.filterUser}/>
        )
    }
}

Answer 1

尝试函数的箭头语法，它将让您访问正确的上下文

像legendBtnHandler = btnName => this.props.filterUser("test");