javascript - Eu preciso vincular manipuladores de eventos ao `this` com TypeScript + React?

Eu tenho um componente com um método simples de manipulador de botão. Se eu não vincular o manipulador onClick ao this no construtor (ou inline no próprio onClick), então recebo um erro porque o contexto do método handleAdd não é a instância onde está o estado do meu componente...

Eu entendo como o bind funciona, mas existe alguma solução alternativa para evitar ter que usar bind em todo lugar com 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" }]
        });
    }
}

Resposta #1

mas existe uma solução alternativa para evitar ter que usar bind por toda parte com TypeScript + React?

Sim. Use uma função arrow:

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

Mais

• Um vídeo rápido
• Mais documentos sobre flecha