イベントハンドラを「this」にバインドする必要がありますか？TypeScript + React？

Question

私は単純なボタンハンドラメソッドを持つコンポーネントを持っています。私は（onClick自体にまたはインライン）コンストラクタでthisにonClickハンドラをバインドしていない場合はhandleAdd方法の文脈が私のコンポーネントの状態があるインスタンスではないので、私は

...エラーを取得します

私はbindの仕組みを理解していますが、bindをTypeScript + Reactで使用する必要性を回避するための回避策がありますか？

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

が、すべての+リアクト活字体のある場所の上にバインドを使用することを避けるための回避策はありますか？

はい。矢印の機能を使用します。

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

もっと

• A quick video
• More docs on arrow

Answer 2

矢印関数は匿名関数に動作しますが、あなたが拡張したい場合は（クラスの拡張性を低減そのクラスを定義し、関数を再定義しますがスーパーを使用します）。

クラスのメンバーである関数を簡単な方法で呼び出すには、bindを使用します。

匿名機能を使用するよりも最悪の使用バインドですか？