ES6的React绑定问题
是指在使用ES6语法编写React组件时，处理组件方法中this指向的问题。在ES6之前，React组件的方法中的this指向组件实例，但是在ES6中，类方法默认不会绑定this，导致在组件方法中无法直接访问组件实例的属性和方法。
为了解决这个问题，有以下几种常见的解决方案：
- 使用箭头函数：箭头函数不会创建自己的this，而是会继承外部作用域的this。因此，可以使用箭头函数来定义组件方法，确保方法中的this指向组件实例。例如：
class MyComponent extends React.Component {
handleClick = () => {
// 使用箭头函数定义方法，确保this指向组件实例
console.log(this.props);
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}- 使用bind方法：可以使用Function.prototype.bind方法来显式地绑定方法中的this。例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 使用bind方法绑定this，确保this指向组件实例
console.log(this.props);
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}- 使用类属性初始化器语法：在类属性初始化器语法中，可以直接使用箭头函数来定义组件方法，确保方法中的this指向组件实例。需要注意的是，该语法需要在Babel等工具的支持下才能使用。例如：
class MyComponent extends React.Component {
handleClick = () => {
// 使用箭头函数定义方法，确保this指向组件实例
console.log(this.props);
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}以上是解决ES6的React绑定问题的常见方法，根据具体情况选择适合的方式来处理this指向的问题。在腾讯云的产品中，可以使用腾讯云云服务器（CVM）来部署React应用，详情请参考腾讯云云服务器产品介绍：腾讯云云服务器。
相关·内容
我通过React.createClass创建的react本机组件似乎没有正确地绑定this关键字，从而阻止了我访问this.state。以下是我遇到的错误：
密码在下面。我没有看到任何本质上不同的例子在网站上，所以我不知道我做错了什么。我怎么才能解决这个问题？
'use strict';
var React = require('react-native');
var Main = React.createClass({
getInitialState: () => {
return { username: '',
浏览 0提问于2016-01-07得票数 4
回答已采纳
我有以下代码，结果是this.state是undefined
articles.js
const React = require('react-native')
const _ = require('lodash')
const styles = require('../styles/articles')
const api = require('../data/api')
const {
ListView,
View,
Text,
Image
} = React
const Articles = React
浏览 1提问于2015-11-23得票数 5
回答已采纳
作为react native的新手，我真的不知道这个错误是什么，以及如何解决这个错误.Here是我正在编写的代码。
import React,{Component} from 'react';
import { StyleSheet, Text, View,TextInput ,Button,ListItem} from 'react-native';
export default class App extends React.Component {
state={
placename:'',
places:[]
}
浏览 4提问于2018-06-30得票数 2
2回答
我正在尝试创建一个React组件，该组件封装一个输入并将更改后的输入的值传递给它的父级。我可以将事件传递给父函数，只需委派onchange函数the，但我更喜欢封装子组件中事件中新值的提取。
以下是我的组件代码：
class BigInputField extends React.Component<IBigInputField, {}>{
handleChange(event){
console.log("handleChange method called !");
debugger;
let value = event &&
浏览 2提问于2015-09-20得票数 2
回答已采纳
我有一个React模块，它在ES5中工作得很好。我正在将其转换为ES6，并使用6to5进行转换。一切都进行得很好，但是当我试图设置我的props时，我会得到一个运行时错误。当我放下debugger并查看this时，我发现this是EventEmitter而不是类。这是我的代码：
var React = require('react');
import CalendarStore from './../stores/calendar.store.js';
function getAppointments() {
return {appts: Calenda
浏览 1提问于2015-02-05得票数 7
回答已采纳
希望你能帮我解决我的问题。我不明白为什么属性rightIconButton在我的<ListItem>示例中不能工作(Material组件)。
<List>
import React from 'react';
import { List } from 'material-ui';
import UsersItem from './UsersItem';
class UsersList extends React.Component {
render() {
return <List>
浏览 4提问于2015-06-24得票数 0
我在一些关于react的站点中发现了一些矛盾，例如：
第一个链接做手动自动绑定
class Post extends React.Component {
constructor(props) {
super(props);
this.state = {
post: this.props.data,
comment: ''
};
}
render() {
return <div>
<input
type="text"
value
浏览 2提问于2016-09-21得票数 0
回答已采纳
我正在尝试使用NavigatorIOS，所以在我的index.ios.js中：
'use strict';
var React = require('react-native');
var Home = require('./App/Components/Home');
var {
AppRegistry,
StyleSheet,
NavigatorIOS
} = React;
var styles = StyleSheet.create({
container:{
flex: 1,
backgroundCo
浏览 3提问于2015-07-08得票数 8
回答已采纳
2回答
我目前有点困在以下几点上。
function Tag(props){
let {text, onRemove, key} = props;
return (
<span onClick={onRemove(key)} key={key}>{text}</span>
)
}
function TagInput (props) {
let {onChange, value, onKeyDown} = props;
return (
<input type="text" onCha
浏览 4提问于2015-12-30得票数 1
回答已采纳
1回答
我正在构建一个搜索引擎(和React.js)，在那里我可以使用他们的API查找GIPHY。我是React.js新手，我在正确处理这个代码时遇到了一些困难。
import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import Gi
浏览 0提问于2018-02-05得票数 2
回答已采纳
我有一个组件，我想要捕获使用panResponder的手势事件，然而，当尝试远程调试(在chome中)时，'this‘上下文引用的是DedicatedWorkerGlobalScope的实例，而不是类实例。
假设我有一个简单的组件
import React, { Component } from 'react';
import {
View,
Text
PanResponder
} from 'react-native';
class MyC extends Component
{
constructor(props
浏览 5提问于2016-09-26得票数 3
我正在使用Reactijs0.14.3，我试图使用React创建一个侧菜单组件，但是我不知道为什么当我使用react文档中的refs时，我有一个“无法读取属性‘推荐’的空”：，你能帮我吗？
'use strict';
import React from 'react';
import BaseComponent from './../../BaseComponent.react';
import Menu from './SidePanelMenu';
import MenuItem from &
浏览 13提问于2015-12-15得票数 19
回答已采纳
在学习React.js时，我有一个问题。
根据官方文件或一些教科书，我发现表达react代码的方式有两种。但是我不知道哪种方式更好。
class SampleComponent extends React.Component {
constructor() {
super();
this.state = {
value: 'react'
};
}
render() {
return (
<p> Hello {this.state.value} !! </p>
);
}
}
浏览 1提问于2017-01-21得票数 1
我正在使用react和material构建一个简单的应用程序
主要部件
'use strict';
import React from 'react';
import ProjectList from './projectlist';
export default class Application extends React.Component {
constructor(props) {
super(props);
}
changeProject() {
}
render() {
浏览 2提问于2015-12-30得票数 0
回答已采纳
1回答
子组件回调
、、
我有反应svg组件，它有两个使用的子组件
我正在尝试将回调函数从父组件传递给要在拖动时调用的子组件。回调函数在拖动时按预期的方式调用，但是this变量返回回调函数中的子组件而不是父组件。
我的结构不正确吗？还是以某种方式修改this变量？
父组件：
import React from 'react';
import Bar from './Bar.jsx';
import Node from './Node.jsx';
class TimeSpan extends React.Component {
constructor(props)
浏览 3提问于2016-05-15得票数 0
回答已采纳
1回答
我正试着把我的头转到功能的范围上。_internalFunction工作得很好，但是我该如何调用_externalFunction呢？
我尝试过self=this，然后在_renderRow中尝试了this._externalFunction，也尝试了() => {this._externalFunction}，但是没有成功。
class sandbox extends Component {
//some code removed for clarity
_renderRow(item) {
const _internalFunction = () =&g
浏览 3提问于2016-10-13得票数 0
1回答
我有我的index.js的以下内容。我已经设置了用创建-反应-应用程序反应反应。然后我安装了redux并对redux进行了反应。
import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './AppContainer';
import {createStore} from 'redux'
import {Provider} from 'react-redux'
const defaultState
浏览 0提问于2018-03-08得票数 2
回答已采纳
1回答
我很难理解this在ES6类中的作用域。在这里，我有一个组件：
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
credentials: {
v: '3.exp',
key: null,
},
coordinates: {
lat: 51.5258541,
lng: -0.08040660000006028
浏览 0提问于2016-04-07得票数 1
2回答
我有一个非常简单的应用程序，我尝试从子组件更新父组件的状态，如下所示：
import React from '../../../../../../../dependencies/node_modules/react';
import ReactDOM from '../../../../../../../dependencies/node_modules/react-dom';
class CalendarMain extends React.Component {
constructor() {
super();
}
浏览 2提问于2016-06-14得票数 3
回答已采纳
2回答
在网址为的web浏览器中，我删除了原始代码，并粘贴了以下代码：
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
document.getElementById("btn").addEventListener("click", function() {
console.log(this)
浏览 1提问于2020-05-19得票数 0
3回答
我试图找出在React组件中this绑定中某些奇怪行为的原因。
我习惯于开发组件并将它们的方法放在类主体中，并将它们绑定到constructor中的组件的constructor中。但是，我最近决定通过提取一些大型方法来分离文件，然后将它们导入到组件中，从而清理和分离关注点。
令我沮丧的是，在这种情况下，绑定this并不那么容易。更奇怪的是，虽然使用ES6箭头函数似乎没有正确绑定，但基本ES5函数的使用很好。我想找出这种行为的原因：
示例1按预期工作。
import React, { Component } from 'react';
class App extends Com
浏览 4提问于2017-02-14得票数 2
回答已采纳
你好，我是react原生的新手，我的代码是：
import React, {
View,
Text,
TextInput,
Component
} from 'react-native';
import Style from './styles/signin';
import Button from '../common/button';
export default class SignIn extends Component {
constructor(props) {
super(props);
浏览 0提问于2016-05-10得票数 11
回答已采纳
嘿，尝试反应的家伙们，在使用setState时遇到了问题，我一直收到未定义错误的Cannot read property setState，我不确定如何修复它。我试过在构造函数中使用bind，但仍然不能解决这个问题。
感谢您的意见。
import React from 'react';
class Products extends React.Component {
constructor(props) {
super(props)
this.state = {products:{}}
this.getItems = this.getItems.bind(this)
浏览 5提问于2017-02-21得票数 2
回答已采纳
在学习React和ES6的过程中，我参加了正式的教程，并四处游玩，使其与ES6兼容。但是，当涉及到执行Ajax请求时，我会得到以下错误：
CommentBox.js:23未定义的TypeError:无法读取未定义的属性'url‘
下面是我的CommentBox文件/代码：
import React from 'react';
import CommentList from './CommentList.js';
import CommentForm from './CommentForm.js';
export default
浏览 4提问于2016-03-31得票数 1
回答已采纳
我遵循本教程来实现一个用于用户身份验证的切换导航器：https://snack.expo.io/@react-navigation/auth-flow-v3。 但是，当我尝试导航到下一个屏幕时，this.navigation.navigate显示为undefined。 undefined is not an object (evaluating 'this.props.navigation.navigate') 我正在为我的应用程序使用expo，我已经查看了React Native - navigation issue "undefined is not an obj
浏览 14提问于2020-01-13得票数 0
回答已采纳
3回答
我正试着去工作。
/*
* A simple React component
*/
class Application extends React.Component {
num = 42;
render() {
return (
<button onClick={this.show}>show</button>
);
}
componentDidMount() {
console.log(this.num);
}
show() {
console.log
浏览 5提问于2016-05-19得票数 1
回答已采纳
我使用的是的react本机抽屉
我试图通过将变量传入NavigationBarRouteMapper来调用方法NavigationBarRouteMapper()。我尝试在NavigationBarRouteMapper中登录，它会正确地记录传入的变量。但是，当它在NavigationBarRouteMapper内部使用时，通过单击“打开抽屉”的左导航按钮，它不会做任何事情：
class drawerPractice extends Component {
...
openDrawer(){
this._drawer.open()
}
render() {
re
浏览 4提问于2016-07-21得票数 1
回答已采纳
2回答
实际上，我正在尝试使用存储和操作开发一个简单的应用程序，并使用fluxible对组件进行反应，而我正面临一个问题。
实际上，在我的组件方法add()中，"this“没有定义.
我不知道有什么问题..。
这是我的组成部分：
进口反应从“反应”；
class Client extends React.Component {
constructor (props) {
super(props);
}
add(e){
this.context.dispatch('ADD_ITEM', {name:'Marvin'
浏览 3提问于2015-09-03得票数 0
回答已采纳
表单onSubmit方法(_updateThing)不是在我的react.js应用程序中触发的。
源代码如下所示。
我认为这个问题很简单，但是我花了很多时间来检查它，无法解决it.Please帮助我。
我的代码有什么问题：
export default React.createClass({
displayName: 'ThingContainer',
statics: {
load: function (context) {
return ThingActions.getData(context);
}
},
mixins: [Co
浏览 0提问于2016-07-14得票数 1
回答已采纳
1回答
我正在尝试将一些旧的语法转换为新的ES6语法。我有一个按钮，它可以切换收藏类/非收藏类，它在旧语法中工作，我想知道我在转换过程中缺少了什么。
这个旧版本运行良好：
进口反应从“反应”；
var BtnFav = React.createClass({
getInitialState() {
return {favorited: false};
},
handleClick(event) {
this.setState({favorited: !this.state.favorited});
},
render() {
var favStatus =
浏览 3提问于2016-06-13得票数 0
回答已采纳
我知道有一些类似的线程讨论范围问题。
使用以下组件
import React from 'react';
import ReactDOM from 'react-dom';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
addMore() {
this.setState({
浏览 6提问于2017-04-26得票数 6
2回答
我在网上看到了很多指南和教程：
var foo = React.createClass
与react-native init所创造的不同之处在于：
class foo extends Component
这是句法吗？还是还有其他的区别？我该用什么？
浏览 3提问于2016-03-23得票数 0
回答已采纳
嗨，这是我第一次用javascript和react开发应用程序--原生的，它是一个菜鸟的问题。如何在_getData函数中调用__onRegionChangeComplete函数？我试过this._getData()它显示
错误:未定义不是函数(计算‘’this._getData()‘)。
var React = require('react-native');
var {
StyleSheet,
Text,
View,
Image,
MapView,
Component,
} = React;
class Map extends Compo
浏览 5提问于2015-09-01得票数 9
回答已采纳
1回答
我试图实现一个基本功能，以禁用基于另一个字段的值的字段。下面是代码示例：
import React from 'react'
import t from "tcomb-form-native";
import {Text, View, TextInput, TouchableHighlight } from 'react-native';
const Form = t.form.Form;
var Type = t.struct({
disable: t.Boolean, // if true, name field will be di
浏览 2提问于2018-02-28得票数 3
回答已采纳
我找不到与mines相关的情况，但是我的问题是我有一个常见的TypeError: Cannot read property 'props' of undefined错误。 奇怪的是，这个错误只发生在我在render()上面定义的方法上。 在render()内部，我可以毫无错误地进行访问。React dev tools显示我甚至可以访问道具。 代码如下： import { Route } from 'react-router-dom'
import AuthService from '../../utils/authentication/AuthServ
浏览 21提问于2019-03-14得票数 1
回答已采纳
5回答
我使用React已经有一段时间了，我已经习惯了这样的概念，即我必须手动将组件方法绑定到组件实例，因为React决定在非自动绑定中是“惯用”的：
因此，我们决定不让这个内置的React类模型。如果需要，仍然可以在构造函数中显式地预绑定方法。
类计数器扩展React.Component {构造函数(){ super()；this.tick = this.tick.bind(this)；}蜱(){.} }
我们可以在这个例子中清楚地看到这一点的影响，从类似的问题：
然而，最近有人问我，基于原型的类和新的、类之间是否有什么区别。直观地说，这个答案应该是一个强调的“不！”，因为生成的实
浏览 7提问于2016-10-29得票数 7
回答已采纳
2回答
类中的类变量是否需要成为stateObject的一部分？我在下面尝试了一下，但没有成功。这里有简单变量的样本，所以我有点超价，下面不工作(警告说未定义)？ https://www.w3schools.com/react/react_es6.asp https://codesandbox.io/s/jovial-glade-lfv4f?fontsize=14&hidenavigation=1&theme=dark import React, { Component } from "react";
class Test extends Component {
浏览 39提问于2020-01-09得票数 0
回答已采纳
3回答
我在一个react应用程序中使用了我在react本机上使用的函数，它不起作用，看起来我无法访问sate，尽管我在构造函数中定义了它，目标是将数据推送到firebase，我尝试使用随机字符串，它确实有效，它只是在使用表单时崩溃了。
如您所见，我正在使用文本组件查看HTML页面上的状态：
import React, { Component } from 'react';
import fire from './config/Fire';
class Home extends Component {
constructor(props) {
supe
浏览 0提问于2018-09-28得票数 1
回答已采纳
这种风格是我在各地的教程上看到的。
onChangeText = { (e)=>{this.setState({input:e})} }
另一种没有lambda表达式的样式
changeText: function(text) {
this.setState({input: text});
},
render: function() {
return (
<React.TextInput onChangeText={ this.changeText } />
);
}
不过，这不是。
render: function
浏览 3提问于2016-01-11得票数 1
回答已采纳
1回答
以下是我的代码
import React,{ Component } from 'react';
import PTSearch from 'post-api-search';
export default class Navbar extends Component{
constructor(props) {
super(props);
this.state = {
source: []
};
this.sourceSearch();
}
sourceSearch() {
PTSearch({
浏览 0提问于2017-10-07得票数 1
我面临着一个流动的问题：
class App extends React.Component {
testop(){
alert("test");
}
showAlert() {
// alert("Im an alert");
this.testop();
}
render() {
return <button onClick={this.showAlert}>show alert</button>;
}
}
当我运行代码时，错误是"Uncaught :无法读取
浏览 4提问于2022-04-24得票数 0
我正在跟踪，并试图将其转换为ES6。但是，当我将CommentBox更改为ES6类时，它开始给我一个this.props.url is undefined错误(在loadCommentsFromServer中的AJAX调用中)。我认为这与ES6如何绑定this有关，但这一点我不太熟悉该语言(或反应)，所以我不确定。我看过并看到了这个：
React.createClass有一个内置的神奇特性，它自动地将所有方法绑定到this。对于在其他类中不习惯此特性的JavaScript开发人员来说，这可能有点令人困惑，或者当他们从React迁移到其他类时会感到困惑。
我不太确定，但我认为这意味着我必
浏览 3提问于2015-09-23得票数 4
回答已采纳
我有这个按钮console.log作为测试，每当我刷新页面，而不是单击导航按钮时，它就会被触发。如果您需要更多的代码，请告诉我是否可以看到此代码的问题。
import React from 'react';
import SideNav from "react-sidenav";
var TeamActions = require('../actions/TeamActions');
export default class Nav extends React.Component {
pushName(name) {
TeamAct
浏览 2提问于2015-08-26得票数 5
回答已采纳
我从react和es6开始，并试图确定
export const Voting = React.createClass({ ... })
和
class Voting extends React.Component { ... }
似乎我可以达到相同的预期效果与两者(当然，除非我是错误的)。如果没有区别的话，我想我更喜欢第二种格式，但我似乎不知道真正的区别是什么。将感谢您的任何和所有意见，谢谢！
浏览 3提问于2015-10-05得票数 1
回答已采纳
正在按照本教程制作一个简单的todo应用程序()。
问题是我遇到了这个错误：
TypeError: _this is undefined
引用在以下组件中使用onClick删除时：
import React, {Component} from 'react'
class TodoItems extends Component {
createTasks(item) {
return (
<li key={item.key} onClick={() => this.props.deleteItem(item.key)
浏览 0提问于2018-12-05得票数 2
回答已采纳
在我的react原生应用程序中使用fetch时，我在将数据发布到express REST API时遇到了问题。下面是我的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Button
浏览 0提问于2016-11-06得票数 15
回答已采纳
未定义的不是一个对象(计算'this.props.navigation')
我不断地得到这个错误，我不知道我的代码出了什么问题。该程序旨在检查用户是否已登录，如果没有登录，则指向注册页面。然而，它似乎不起作用。有人能告诉我怎么回事吗？
加载屏幕：
import React, {Component} from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
import firebase from 'firebase
浏览 1提问于2020-03-06得票数 2
回答已采纳
一个对另一个有什么好处？
是否有人反对，我应该使用较新的，无论是哪一个？
我应该创建组件还是React来开发我的UI？
我看到一些使用组件的例子。例如：
export default class ItemList extends Component {
constructor(props) {
//binding functions
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
super(props);
this.s
浏览 2提问于2016-03-04得票数 8
回答已采纳
我在React组件中有一个onClick props，它包含以下内容：
onClick={_.bind(this.callMe, this, argToPass)}
请记住，这是在使用React.createClass的React组件中，因此组件函数应该绑定到它的上下文。
不幸的是，当我尝试通过执行以下操作来绑定它时：
onClick={this.callMe(argToPass)}
它打破了我的一个测试。
我不想绑定它，因为它像这样作为道具传递：
onClick={this.callMe(argToPass).bind(this)}
b/c的性能问题。
什么是普通的javascript等价物
浏览 0提问于2017-09-27得票数 0
1回答
我正在开发一个RN应用程序，我遇到了一个问题，我试图改变组件的状态，因为在子组件中发生了一个事件，并且得到了不一致的结果。
var app = React.createClass({
render: function() {
return (
<MainLogin onLogin={this.onLogin} />
);
},
onLogin: function() {
this.setState({isLoggedIn: true});
}
});
class MainLogin extends Component {
r
浏览 4提问于2016-02-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
