仅将组件方法绑定到此-工作吗？
提问于 2015-11-07 04:10:01
在使用react 0.14的ES6时，有没有避免样板的方法？
直到现在，我并不需要担心自己的函数会被绑定到我创建的Component上，但现在已经不是了(为什么？！)情况和组件仅限于Component超类(如果我正确理解错误的话)。
因此，每次创建新类时，我真正需要做的是将这些代码添加到构造函数中：
class CustomComp extends React.Component {
constructor() {
super();
this.newFunction = this.newFunction.bind(this);
}
newFunction(){
console.log('This is user defined function');
}
render() {
return <button onClick={this.newFunction}>Click</button>
}
}因此，如果我不绑定newFunction，它将失败(没有道具、状态或任何东西)。
有办法解决这个问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-07 04:22:24
来自反应文件
无自动绑定 方法遵循与常规ES6类相同的语义，这意味着它们不会自动将其绑定到实例。您必须显式地使用.bind(此)或箭头函数=>。
因此，不存在绑定0.14中所有新方法的自动方法。但是，如文档所示，您可以：
1)使用箭头函数(但是，如果您使用的是Babel，则需要)
class CustomComp extends React.Component {
constructor() {
super();
}
newFunction = () => {
console.log('This is user defined function');
}
render() {
return <button onClick={this.newFunction}>Click</button>
}
}2)可以在place中绑定
class CustomComp extends React.Component {
constructor() {
super();
}
newFunction() {
console.log('This is user defined function');
}
render() {
return <button onClick={this.newFunction.bind(this)}>Click</button>
}
}3)您可以使用箭头函数 in (与绑定类似)：
class CustomComp extends React.Component {
constructor() {
super();
}
newFunction() {
console.log('This is user defined function');
}
render() {
return <button onClick={() => this.newFunction()}>Click</button>
}
}如果我只有1-2个方法，我倾向于使用数字2&3。数字1很好，但是您必须记住每个方法定义的语法。如果我有很多方法，我确实倾向于在构造函数中绑定。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33582605
复制相关文章
相似问题
使用C#的SimpleITK读取原始图像文件
尝试打开C#交互式窗口时出错
使用Retrofit2.0上传图像时出错
SimpleItk裁剪图像
在Python中使用SimpleITK读取mhd文件时出错
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
