Question

import React from 'react'

const Buttons = React.createClass({

    getInitialState() {
         return {clicks: 0}
    },

    countClicks() {
        this.setState({
            clicks: ++this.state.clicks
        })
        console.log(this.state.clicks)
    }

    render() {
        return (
            <div>
                <div onClick={console.log("HEYYY")}>This should log "HEYYY"</div>
            <div onClick=({this.countClicks()}>This should update clicks</div>

        )
    }
})

这将分别在第一次渲染时打印“HEYYY”和1，但在实际点击时不会执行任何操作。

虽然这给我带来了一些麻烦，但我在一个例子中找到了解决方案：

//Instead of doing this
<a onClick={this._changeValue(2)}>Change Value</a>

//Do this
<a onClick={this._changeValue.bind(2)}>Change Value</a>

啊，完美，我想。除了当我尝试它时，我收到一个错误：

TypeError：无法调用undefined
的方法'bind'

我删除了简单的console.log，因为我不知道要在其中绑定什么，只与countClicks()一起使用，当我删除它时，我确实得到了有些工作括号如下：

<div onClick=({this.countClicks.bind(this)})>This should update clicks</div>

首先，当我有括号时，为什么我不能绑定某些东西？其次，我得到了一个丑陋的警告：

警告：bind（）：您正在将组件方法绑定到组件。 React会以高性能的方式为您自动执行此操作，因此你可以安全地删除这个电话。

React傻了吗？！

或者我......？

Answer 1

我自己的解决方案：

render() {
    const self = this

    <div onClick={function() { self.countClicks() }}>This should update clicks</div>
}

不使用bind，没有错误，没有警告。

无法绑定任何东西：“无法调用方法”绑定“undefined”

1 个答案: