我有一个构造函数,它注册一个事件处理程序:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', function () {
alert(this.data);
});
}
// Mock transport object
var transport = {
on: function(event, callback) {
setTimeout(callback, 1000);
}
};
// called as
var obj = new MyConstructor('foo', transport);但是,我无法data在回调中访问已创建对象的属性.它看起来this并不是指创建的对象,而是指另一个对象.
我还尝试使用对象方法而不是匿名函数:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', this.alert);
}
MyConstructor.prototype.alert = function() {
alert(this.name);
};
但它表现出同样的问题.
如何访问正确的对象？
我想传递父divID,点击该div或任何相同的子元素div.但我无法实现它.请告诉我我在哪里弄错了.代码如下:
viewMore: function(i,j){
console.log('You clicked: ', i );
},
render : function(){
var attributeId = "groups_";
attributeId+= index;
return(
//parent div
<div className="groups" id={attributeId} onClick={this.viewMore}>
<div className="floatLeft"> Group Name: <h3>My Name</h3></div>
<span className="floatRight typeCd">POC</span>
<div className="clearfix"> Key Attributes:
<ul>
<li> POC 1</li>
</ul>
</div>
</div>
)
};
class SomeClass extends Component{
someEventHandler(event){
}
render(){
return <input onChange={------here------}>
}
}
我看到不同版本的------here------部分.
// 1
return <input onChange={this.someEventHandler.bind(this)}>
// 2
return <input onChange={(event) => { this.someEventHandler(event) }>
// 3
return <input onChange={this.someEventHandler}>
版本有何不同？或者只是一个偏好问题？
谢谢大家的回答和评论.都是有帮助的,我强烈建议阅读此链接FIRST如果你是这个困惑了我.
http://blog.andrewray.me/react-es6-autobinding-and-createclass/
我有以下组件
const list = (props) => {
const handler = function(){
};
var listItems = props.items.map(function(item, index){
return (
<li key={index} onClick={ handler }>
{item.text}
</li>
)
});
return (
<div>
<ul>
{listItems}
</ul>
</div>
)
}
点击我想要点击li的索引.使用ES6而不绑定我该怎么办？
当您必须this在事件处理程序中使用关键字时,必须将函数(事件处理程序)与thiskerword绑定.否则,您需要使用箭头功能.
例如
//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
this.setState({
isClicked:true
});
}
render() {
return (
<div className="App">
<button onClick={this.handleClick}>Click</button>
</div>
);
}
但是,使用上述方法,您无法传递参数.你需要使用......
bind(this, param) 功能之后即
<button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>
这是个问题.
将参数传递给事件处理程序的最有效方法是什么？
根据官方文档,使用bind()可以破坏性能,因为......
每次组件渲染时,在render中使用Function.prototype.bind都会创建一个新函数
使用匿名箭头功能也是如此.医生说......
在渲染中使用箭头函数会在每次渲染时创建一个新函数
那么,传递参数的最有效方法是什么？
任何输入将不胜感激.
PS
有人问过如何 …
我正在使用内联箭头函数来更改onClickReact 组件中某些 div的处理程序，但我知道这在性能方面不是一个好方法。
客观地说，设置onClick需要参数的处理程序的最有效方法是什么？这是我尝试过的：
1.内联箭头函数
changeRoute (routeName) {
console.log(routeName)
}
render() {
return (
<>
<div onClick={() => this.changeRoute("page1")}>1</div>
<div onClick={() => this.changeRoute("page2")}>2</div>
</>
)
}
2.如果我使用构造函数绑定，那么我如何传递道具？
constructor() {
super(props)
this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
console.log(routeName)
}
render() {
return (
<>
<div onClick={this.changeRoute}>1</div>
<div onClick={this.changeRoute}>2</div>
</>
)
}
3.如果我删除箭头函数，则渲染本身调用的函数
changeRoute (routeName) {
console.log(routeName)
}
render() {
return (
<>
<div onClick={this.changeRoute("page1")}>1</div>
<div onClick={this.changeRoute("page2")}>2</div>
</>
)
}
4.如果我使用内联绑定，那么它的性能也不是最好的
changeRoute (routeName) {
console.log(routeName)
}
render() …对不起，如果这个主题可能是另一个主题的副本，但我不明白我的代码做错了什么+我真的很新来反应。我尝试了几种解决方案，但都没有奏效。我会把我读过的一些帖子放在这里：
问题
我需要value使用 handleInput控制台.log里面的字符串
代码
import React, {Component} from 'react';
import Button from './Button';
import Screen from './screen';
import './keyboard.css'
class NumberKeyboard extends Component {
constructor(props){
super(props)
this.state = {
operations: []
}
}
handleInput(props) {
const buttonValue= this.props.value;
console.log(buttonValue)
}
render() {
return (
<div className="keyboard">
<div className="column"></div>
<div className="column">
<div className="keyboardRow roundBorder" value={"example"} onClick={() => this.handleInput('value')}>
<Screen className="crystalScreen"></Screen>
<Button value="clear" >C</Button>
<Button value="±">±</Button>
<Button value=".">.</Button> …我正在使用 React 和（至少现在）使用具有 和 标签的 Material-UI 来开发我的 UI。在 ListItem 内，我想检测对图标的单击。问题是我的列表将有许多列表项，我想将列表项的索引传递到我的点击处理程序中。但我还需要传入点击事件本身。我的代码如下所示：
class SomeList extends React.Component {
handleClickDeleteIcon(e) {
e.stopPropagation();
console.log('Fired handleClickDeleteIcon()!');
}
everywhereClickFunction(e) {
console.log('Fired everywhereClickFunction()!');
}
render() {
return (
<List>
<Subheader inset={true}>Some Files</Subheader>
<ListItem
leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
rightIcon={
<div onClick={this.handleClickDeleteIcon}>
<DeleteForever />
</div>
}
primaryText="Vacation itinerary"
secondaryText="Jan 20, 2014"
onTouchTap={this.everywhereClickFunction}
onClick={this.everywhereClickFunction}
/>
<ListItem
leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
rightIcon={
<div onClick={this.handleClickDeleteIcon}>
<DeleteForever />
</div>
}
primaryText="Kitchen remodel"
secondaryText="Jan 10, 2014"
/>
<ListItem
leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />} …我正在学习React,并按照本教程创建了一个简单的Tic-Tac-Toe游戏,您可以在CodePen中查看.
我很困惑箭头函数如何在Board组件函数onClick内返回的Square组件的属性中工作renderSquare:onClick={() => this.props.onClick(i)}.而且我的游戏组件也是如此onClick={ (i) => this.handleClick(i)}.我以为我可以在没有箭头功能的情况下编写它(就像onClick={this.handleClick(i)}),但这打破了游戏.