[英]this.props working for one func and don't work for another React-Redux
My problem is described in the topic 我的问题在主题中进行了描述
Here it works: 在这里工作:
handleItemClick = (e, { name }) => {
if (name !== this.props.prevName) {
document.getElementById(name).style = 'border: 3px solid black';
if (document.getElementById(this.props.prevName))
document.getElementById(this.props.prevName).style = 'border: 1px solid black';
this.props.dispatch({type: 'CHANGE_PREVNAME', payload: name});
let i = this.props.items.findIndex(element => {
return (element.general.firstName + ' ' + element.general.lastName) === name;
});
this.props.dispatch( { type: 'CHANGE_SELECTION', payload: this.props.items[i] } );
}
}
And here it doesn't work: 在这里它不起作用:
searchHandler(event) {
this.props.dispatch( { type: 'CHANGE_TERM', payload: event.target.value } );
}
It's functions of the same class, and here mapDispatchToProps
(outside the class ofc) func: 它是同一类的函数,这里是mapDispatchToProps
(在mapDispatchToProps
类之外)func:
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({
toTakeData: loadItems,
dispatch: dispatch
}, dispatch)
};
}
From the react docs : 从react docs :
You have to be careful about the meaning of
this
in JSX callbacks. 你必须小心的意思this
在JSX回调。 In JavaScript, class methods are not bound by default. 在JavaScript中,默认情况下不绑定类方法。 If you forget to bindthis.handleClick
and pass it toonClick
,this
will beundefined
when the function is actually called. 如果你忘了绑定this.handleClick
并把它传递到onClick
,this
将是undefined
,当函数实际上是调用。This is not React-specific behavior; 这不是特定于React的行为; it is a part of how functions work in JavaScript. 它是函数在JavaScript中工作方式的一部分。 Generally, if you refer to a method without
()
after it, such asonClick={this.handleClick}
, you should bind that method. 通常,如果引用的方法后面没有()
,例如onClick={this.handleClick}
,则应绑定该方法。
If you use babel you can use the public class fields syntax which will lead to this
being bound automatially. 如果您使用的巴贝尔则可以使用公用类领域的语法 ,这将导致this
被automatially约束。 Note that this method is still not in the language standard and does only work because babel transforms it to valid javascript: 请注意,此方法仍不在语言标准中,并且只能工作,因为babel将其转换为有效的javascript:
searchHandler = event => { /* this is defined here ... */ }
The es5 way would be to bind the function in the constructor
: es5的方式是将函数绑定到constructor
函数中:
class MyComponent extends Component {
constructor(props) {
super(props);
// bind this to your handler
this.searchHandler = this.searchHandler.bind(this);
/* other initialization */
}
searchHander(event) { /* you can access this here... */ }
}
Note that the arrow function syntax comes with some limitations. 请注意,箭头函数语法有一些限制。 For example you can't override it in classes that extend the class it was defined in. In react this is not a problem most of the time because inheritance is discouraged in favour of composition. 例如,您不能在扩展定义它的类的类中重写它。在大多数情况下,这都不是问题,因为不鼓励使用继承来支持合成。
对于该功能不起作用,请使其成为箭头功能
searchHandler = (event) => { ... }
searchHandler(event) {
this.props.dispatch( { type: 'CHANGE_TERM', payload: event.target.value } );
}
Problem is of "this". 问题是“这个”。 "this" for searchHandler is not bound correctly. searchHandler的“ this”未正确绑定。 For handleItemClick function as it is defined as arrow function and arrow function get "this" from where it is defined. 对于handleItemClick函数,因为它定义为箭头函数,而箭头函数从定义的位置获取“ this”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.