麻烦与反应

Question

1. 我在做什么错，特别是当我点击按钮，它给了我绑定的事件处理程序：遗漏的类型错误：无法读取属性“onDismiss”的未定义

2. 当是有必要将一个事件处理程序绑定到构造函数？

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;

Answer 1

的问题是，你使用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> 
)