Question

我正在使用Typescript关注Facebook反应教程。不过这是我第一次使用react和打字稿。我想将onClick事件传递给'Square'类，它使用typescript实现了一个state和props接口。

如何启用此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 />
        ;
    }
}

Answer 1

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

interface MyProps { 
    value?: string, 
    onClick?
}

这将为onClick提供一种“任意”类型，然后您可以传入您喜欢的任何函数。如果您知道要传入某种类型的函数，则可以尝试创建通用函数类型并将其设置为onClick。

Answer 2

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

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

祝你好运：-）

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

2 个答案: