Question

我这里有一个简单的React类，其中render()方法返回带有onClick属性的button。

class Board extends React.Component {
    render() {
        var array = [];
        // var key = 1;
        for (let i = 0 ; i <= 2 ; i++) {
            // let subarray of state
            var row_ = [];
            for (let n = 0 ; n <= 2 ; n++) {
                // let cell of subarray
                row_.push(
                    <button
                        className='choiceButton'
                        row={i}
                        col={n}
                        ref={'button' + i + '_' + n}
                        onClick={() => {this.props.flip({x: i, y: n})}}
                        disabled={this.props.isEnding}
                    >&nbsp;</button>
                )
            }
            array.push(
                <div className="boardRow" align="center">
                    {row_}
                </div>
            );
            // key++;
        }
        return (
            <div>{array}</div>
        )
    }
}

我可以确认我从this.props调用的所有函数和值都是正确的。

出于某种原因，在使用Chromium Developer Tools进行检查时，呈现的button没有任何onClick属性。

有什么想法吗？非常感谢。

Answer 1

React呈现的按钮元素没有 onclick 属性是完全正常的。有一种比 onclick 属性更有效的方法来添加事件处理程序，即使用addEventListener方法，这就是React在幕后所做的。

我已将您的代码示例放在沙盒中进行试用，它运行正常，单击其中一个按钮时会调用 flip 函数：

https://codesandbox.io/s/vq1912yxr5

React onClick属性未呈现

1 个答案: