使用 react/typescript 将 onclick 事件传递给继承的类答案

【问题标题】：Passing onclick event to inherited class using react / typescript使用 react/typescript 将 onclick 事件传递给继承的类
【发布时间】：2017-08-19 12:11:23
【问题描述】：

我正在关注使用 Typescript 的 Facebook 反应教程。然而，这是我第一次使用 react 和 typescript。我想将 onClick 事件传递给使用 typescript 实现状态和道具接口的“Square”类。

如何让这个 Square 类接受我的 onClick 事件并按预期触发它？在语法糖 atm 中苦苦挣扎。

import * as React from 'react';

interface MyProps {
    value?: string;
}

interface MyState {
    value?: string;
    squares?: any[];
}

class Square extends React.Component<MyProps, MyState> {
    constructor() {
        super();
        this.state = {
            value: null,
            squares: [null]
        };
    }
    render() {
        return (
            <button className="square" onClick={() => this.setState({ value: 'X' })}>
                {this.state.value}
            </button>
        );
    }
}

class Board extends React.Component<MyProps, MyState> {
    constructor() {
        super();
        this.state = {
            squares: Array(9).fill(null),
        };
    }
    renderSquare(i) {
        return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />;
    }
    render() {
        const status = 'Next player: X';
        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

class Game extends React.Component<MyProps, MyState> {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

export class ReactTut extends React.Component<any, void> {
    public render() {
        return <Game />
        ;
    }
}

【问题讨论】：

我需要在 MyProps 界面中添加一个可选功能。 interface MyProps { value?: string; onClick?(): void; }

标签： reactjs typescript interface

【解决方案1】：

我正在关注有关井字游戏的类似教程，这是我的解决方案供您参考：

onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

祝你好运:-)

【讨论】：

【解决方案2】：

最简单的方法就是使“onClick”属性类型安全，如下所示：

interface MyProps { 
    value?: string, 
    onClick?
}

这会给 onClick 一个“any”类型，然后你可以传入任何你喜欢的函数。如果你知道你会传入某种类型的函数，那么你可以尝试创建一个泛型函数类型并将其设置为 onClick。

【讨论】：