如何通过"这个"将事件启动器指向反应js?

时间:2017-03-20 12:22:51

标签: javascript reactjs react-jsx material-ui

我正在尝试将按钮对象传递给函数并从该函数访问其属性。 我的按钮:

<RaisedButton label="Primary" id = "1" onTouchTap={()=>this.buttonPress(this)}  primary={true} />

我的功能:

buttonPress = (event) => {
        console.log(event);
    }

所有代码都在我在主要组件中使用的单独组件中。问题是当我按下按钮时它没有将按钮对象传递给它发送整个组件的功能。我怎么才能得到按钮对象?

2 个答案:

答案 0 :(得分:0)

最好的方法是:

onTouchTap={this.buttonPress.bind(this, someProperty)}

使用这样的事件处理程序:

buttonPress (someProperty) {
    console.log(someProperty);
}

因此,您可以将事件处理程序与您需要的道具绑定,而不是访问RaisedButton属性。

答案 1 :(得分:0)

编辑:我的原始答案(如下),正如Ardentum所指出的,记录了点击的DOM元素。尝试做这样的事情:

<RaisedButton 
    ref={(button) => { this.RaisedButton = button; }}
    onTouchTap={()=>this.buttonPress( this.RaisedButton )}
/>

原始答案: onTouchTap={()=>this.buttonPress(this)}中的 this 指的是呈现<RaisedButton (...) />的整个组件。要传递按钮,即 TouchTapped ,您可以使用

onTouchTap={(event)=>this.buttonPress(event)}

然后

buttonPress = (event) => {
    console.log(event.target);
}
相关问题