麻烦与反应
问题描述:
我在做什么错,特别是当我点击按钮,它给了我绑定的事件处理程序:遗漏的类型错误:无法读取属性“onDismiss”的未定义麻烦与反应
当是有必要将一个事件处理程序绑定到构造函数?
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import contacts from './contacts';
class App extends Component {
constructor(props){
super(props)
this.state = {
contacts
};
this.onDismiss = this.onDismiss.bind(this);
}
onDismiss(id) {
console.log(id)
}
render() {
return (
<div className="App">
{
this.state.contacts.map(function(contact, i){
return(
<div key={contact.id}> <br></br>
<div> First Name:</div>
<span> {contact.first_name}</span>
<div> Last Name:</div>
<span> {contact.last_name}</span>
<div> Email:</div>
<span> {contact.email}</span>
<div> <button type="button" onClick={() => this.onDismiss(contact.id)}>Remove Contact </button> </div>
</div>
)
})
}
</div>
);
}
}
export default App;
答
的问题是,你使用this
一个function
里面,所以this
是由函数,而不是封闭类的约束。尝试使用拉姆达:
this.state.contacts.map((contact, i) => (
<div key={contact.id}>
<br />
<div>First Name:</div>
<span>{contact.first_name}</span>
<div>Last Name:</div>
<span>{contact.last_name}</span>
<div>Email:</div>
<span>{contact.email}</span>
<div>
<button type="button" onClick={() => this.onDismiss(contact.id)}>
Remove Contact
</button>
</div>
</div>
)