Muss ich Event-Handler mit TypeScript + React an `this` binden?

Question

Ich habe eine Komponente mit einer einfachen Button-Handler-Methode. Wenn ich den onClick Handler this im Konstruktor nicht binden (oder inline auf den onClick selbst), dann bekomme ich einen Fehler, da der Kontext der handleAdd Methode nicht der Fall ist, wo Zustand meiner Komponente ist ...

Ich verstehe, wie die bind funktioniert, aber gibt es eine Problemumgehung um zu vermeiden, bind überall mit TypeScript + React zu verwenden?

export class TodoList extends React.Component<ITodoListProps, Partial<ITodoListState>> { 
    constructor(props: ITodoListProps) { 
     super(props); 
     this.state = { items: props.items }; 

     this.handleAdd.bind(this); 
    } 

    public render() { 
     return (
      <div> 
       <button onClick={this.handleAdd}>Add</button> 
       <ul> 
        {this.state.items.map((todo, i) => { 
         return <TodoItem key={i} name={todo.name} /> 
        })} 
       </ul> 
      </div> 
     ); 
    } 

    handleAdd(e: any) { 
     this.setState({ 
      items: [...this.state.items, { name: "foo" }] 
     }); 
    } 
} 

Answer 1

aber ist es eine Abhilfe mit Typoskript binden alle über den Ort verwenden, um zu vermeiden, + reagieren?

Ja. Verwenden Sie eine Pfeilfunktion:

handleAdd = (e: any) => { 
    this.setState({ 
     items: [...this.state.items, { name: "foo" }] 
    }); 
} 

Mehr

• A quick video
• More docs on arrow

Answer 2

Der Pfeil Funktion arbeitet für anonym Funktionen, sondern verringert die Dehnbarkeit der Klasse (wenn Sie erweitern möchten diese Klasse und neu definieren die Funktion aber mit super).

Um die Funktion, die ein Mitglied der Klasse ist, den einfachen Weg zu nennen, verwenden Sie bind.

Ist die schlimmste Verwendung binden als anonym Funktionen verwenden?