Question

通常当我点击子组件中的菜单项时，它会调用{this.handlesort}这是一个本地函数。句柄排序从我的父组件获取onReorder道具。 {onReorder}调用一个名为reOrder的本地函数。它设置{orderBy和orderDir}的状态。问题是，当我点击{menuitem}时，它会立即返回此错误。（未捕获的TypeError：无法读取未定义的属性'onReOrder'）。通常它在我不使用es6时有效。请帮忙

（父组件）

export default class TenantView extends Component {
    constructor(props) {
        super(props);
        //setting state
        this.state = {
            //tenants: [],
            orderBy: 'name',
            orderDir: 'asc',};
    };
    componentWillMount() {
        this.setState({
            tenants:[{img: 'tenant1.jpg',name: 'John', address: '7 Gilbert', 
                     paid: 'true'},{img: 'tenant2.jpg',name:'Abba', address: 
                     '3 Vecq st', }]});//setState
    }//componentWillMount



    reOrder(orderBy, orderDir) {
        this.setState({
            orderBy: orderBy,
            orderDir: orderDir,
        });//setState
    }//reorder

    render(){
        var tenants = this.state.tenants;
        var orderBy = this.state.orderBy;
        var orderDir = this.state.orderDir;

        tenants = _.orderBy(tenants, function(item) {
            return item[orderBy].toLowerCase();
        }, orderDir);//orderBy

        tenants = tenants.map(function(item, index){
            return (
                <TenantList key = { index } singleTenant = { item } />
             )
        }.bind(this))

        return(
            <div style={styles.root}>
                <Subheader>Payment Status</Subheader>

                <PaymentStatus/>
                <SearchTenant
                    orderBy = { this.state.orderBy }
                    orderDir = { this.state.orderDir }
                    onReOrder = { this.reOrder }
                />
                <GridList cols={1} cellHeight={80} style={styles.gridList}>
                    {tenants}
                </GridList>
            </div>

        )//return
    }//render
}

childcomponent

export default class SearchTenant extends Component {
    handleSort(e){
        this.props.onReOrder(e.target.id, this.props.orderDir)
    }//handleSort

    handleOrder(e){
        this.props.onReOrder(this.props.orderBy, e.target.id)
    }//handleSort


    render(){
       return(
           <div className="input-group">
               <input placeholder="Search" type="text" onChange = { 
                this.handleSearch }  className= "validate"/>
               <DropDownMenu openImmediately={true}>
                   <MenuItem id = "name" onClick = {this.handleSort}>Name{ ( 
                        this.props.orderBy === 'name') ? <i 
                        className="material-icons">check_circle</i>: null }
                   </MenuItem>
                   <MenuItem id = "address" onClick = 
                       {this.handleSort}>Address{ 
                       (this.props.orderBy === 'address') ? <i 
                       className="material-
                       icons">check_circle</i>: null }
                   </MenuItem>
                   <MenuItem id = "asc" onClick = {this.handleOrder}>Asc{ 
                       (this.props.orderDir === 'asc') ? <i 
                       className="material-icons">check_circle</i>: null }
                   </MenuItem>
                   <MenuItem id = "desc" onClick = {this.handleOrder}>Desc{ 
                       (this.props.orderDir === 'desc') ? <i 
                        className="material-icons">check_circle</i>: null }
                   </MenuItem>
               </DropDownMenu>
           </div>
       )//return
    }//render
}//TeamList

Answer 1

您必须确保正确绑定传递给内联事件处理程序的函数，以使其中的调用能够正确引用组件范围的this：

在组件中定义以下构造函数：

constructor (props){
  super (props):
  this.handleSort = this.handleSort.bind(this);
  this.handleOrder = this.handleOrder.bind(this);
}

Answer 2

问题在于，您在this和handleSort内引用的handleOrder并不是指组件，而是指内部方法。

这个问题有两个解决方案。

在组件的构造函数中将函数与组件绑定：

export default class SearchTenant extends Component {

    constructor() {
        this.handleSort = this.handleSort.bind(this)
        this.handleOrder = this.handleOrder.bind(this)
    }

    // rest of the code
}

或者使用提供词汇范围的ES6 arrow函数：

export default class SearchTenant extends Component {

    handleSort = () => {
        this.props.onReOrder(e.target.id, this.props.orderDir)
    }
}

React - 无法读取undefined的属性

2 个答案: