Question

我正在添加下拉列表并尝试将事件处理程序添加到每个项目并在Button中显示所选项目。当我尝试在REACT.js中的菜单项上挂钩事件onClick时出现此错误。

未捕获的TypeError：无法读取属性＆＃39; subscribeToEvents＆＃39;未定义的。这是我的课程

＆＃13;

export default class LocationList extends React.Component {


 constructor(props)
 {
  super(props);
   this.state={selectedIndex:"Location",
                data:{
                   cities:       ["Location","Bangalore","Chennai","Pune"] 

               } 
             };


 }
 
  getInitialState()
 {
 
 }

 

 subscribeToEvents(event)
 {
 
 }

  render()
  {
    var titleVal = this.state.selectedIndex;
    console.log(titleVal);
    
    return(
      <div class="dropdown">
         <button class="btn btn-primary dropdown-toggle" id="locationDropDown"  type="button" data-toggle="dropdown">{titleVal}
         <span class="caret"></span></button>
         <ul class="dropdown-menu">
           {  this.state.data.cities.map(function(city) {
                if(city !='Location')
                {
                  return <li onClick={this.subscribeToEvents.bind(this)} ><a href="#" >{city}</a></li>
                }
             })
            }
         </ul>   
      </div>);

  }
}

＆＃13;

Answer 1

您的问题是this在您传递给.map()的函数内部未定义。

解决方案1：绑定正确的上下文。

this.state.data.cities.map(function(city) {
    if(city !== 'Location') {
        return <li onClick={this.subscribeToEvents.bind(this)} ><a href="#" >{city}</a></li>
    }
}.bind(this));

解决方案2：使用箭头功能，该功能会自动绑定this的正确上下文。

this.state.data.cities.map(city => {
    if(city !== 'Location') {
        return <li onClick={this.subscribeToEvents.bind(this)} ><a href="#" >{city}</a></li>
    }
});

挂钩事件处理程序时，REACT中的UnCaughtType错误，js

1 个答案: