无法使用通过onClick()调用的this.setState()设置状态变量
无法使用通过onClick()调用的this.setState()设置状态变量是因为在React中，事件处理函数中的this默认指向undefined。为了解决这个问题，可以使用箭头函数或者在构造函数中绑定this来确保this指向组件实例。
- 箭头函数解决方法：
handleClick = () => {
this.setState({ variable: value });
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}- 构造函数中绑定this解决方法：
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ variable: value });
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}这样就可以通过onClick()调用的this.setState()来设置状态变量了。
推荐的腾讯云相关产品：腾讯云函数（Serverless Cloud Function），它是一种无需管理服务器即可运行代码的计算服务。腾讯云函数支持多种编程语言，包括Node.js、Python、Java等，可以用于处理前端和后端的各种业务逻辑。
产品介绍链接地址：腾讯云函数
相关·内容
因此，我对React和web开发总体来说是个新手(刚从训练营出来)，所以我的问题可能会很愚蠢。在使用React状态单击按钮后，我遇到了一个样式问题。 在我点击其中一个之后，所有的更新都立刻更新了，之后我一直在用头撞墙。 class Foundations extends Component {
state = {
clicked: false
}
handleClickFunds = () => {
this.setState({
clicked: true
})
}
handleClickOrgs = () => {
thi
浏览 19提问于2019-06-05得票数 0
回答已采纳
我已经创建了ASP.NET核心API和React CURD实践示例。，但我使用react语义ui作为视图。我是新的反应和ASP.NET任何建议，以便我可以改进我的代码。
我可以获取，发布，放置和删除客户记录，但有一些小问题或点，我不知道如何实现。它们如下所示
1-我使用了Modal，所以我可以打开弹出式表单(AddCustomer是用于添加和编辑记录的表单)，因为我有两个函数来打开和关闭Modal，但我不知道如何从Customer.js调用它们，也不知道如何在成功的POST、PUT、DELETE请求上调用它们。
2-当我打开表单添加或编辑记录时，我无法将其存储在状态中。当我尝试在输入域中键入时
浏览 4提问于2020-03-15得票数 1
我正在创建一个使用react的俄罗斯方块游戏，所有操作都很好，并按预期执行，直到添加了一个键盘EventListener，它主要侦听左右箭头键来移动组件。问题是，每次在分配给它的函数中调用setState()时，它都会重复相同的setState()函数，甚至不会呈现组件，因此我得到了“最大更新深度超过”错误。我的组件的代码：
class App extends React.Component {
constructor () {
super()
this.state = {
allBlocks: [],
allBlockClass: []
}
浏览 7提问于2022-08-18得票数 0
1回答
我有一个问题，我创建了多个进度条和onClick事件，但当我单击进度条时，所有其他进度条的onClick事件都会被激活。
我有一个for循环，它将多个带有进度条的<td>推送到呈现。
我想要实现的是，当用户单击每个进度栏时，根据他们单击的进度栏，模式上会出现不同的详细信息。
我使用的是模式。
感谢您的帮助！
代码：
getInitialState: function(){
return { showModal: false };
},
close(){
this.setState({ showModal: false });
},
open(){
this.se
浏览 17提问于2017-03-03得票数 1
1回答
我正在构建一个在一秒钟内计算点击量的web应用程序，但是倒计时(从5到0)不起作用。倒计时应该每秒钟下降一次(1000毫秒)。我尝试过使用setInterval()，但是它不起作用，现在我不知道该做什么
import React, {Component} from 'react';
import './App.scss';
class App extends Component {
state = {
count: 0,
cps: 0,
seconds: 5,
target: '',
}
five
浏览 4提问于2021-05-31得票数 1
1回答
我看到这个问题以前已经问过了，但是没有一个合适的答案，我试图从类组件重构到函数组件，在类的代码中一切正常，但是当我将它更改为函数组件时，状态只在第二次单击时更新，并得到一个错误
Uncaught (承诺) TypeError:无法读取未定义(读'startTimestamp')的属性
以前的代码：
onClick={() => {
this.canvas.current
.exportImage("png")
浏览 4提问于2022-09-29得票数 0
所以我要一页一页地取记录。在挂载时，我获取第1页，在next和prev按钮上更改计数，这是更改页面号和发出get请求。但我的代码不能正常工作。它给了我伯爵以前状态的结果。
App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {},
count: 1,
};
}
handleApi = () => {
fetch(`http://localhost:9000/accounts
浏览 2提问于2021-12-06得票数 1
回答已采纳
1回答
我有一个产品列表，它显示为一个表，当单击产品行时，我想显示关于某个产品的更多信息(调用另一个api)。该模型现在正在工作，当单击该行时，该模型将显示出来，但我不知道如何实现再次调用另一个api/端点的逻辑，并在单击时显示有关正确产品的信息。我应该在哪里进行另一个api调用？构造函数中的另一个api是否应该有另一个状态，然后在ComponentDidMount()中获取？
//Modal.js
import React from "react";
import Table from "react-bootstrap/Table";
export defaul
浏览 0提问于2019-09-25得票数 1
回答已采纳
我对此非常陌生，我试图创建一个倒计时器，但是，当我调用setInterval函数onClick时，我的状态会更改为NAN，并且不会减少，即使初始状态是一个数字
interval = () => {
this.myInterval = setInterval(() => {
this.setState(({seconds}) => ({
second: parseInt(seconds) - 1
}))
}, 1000)
}
<button onClick={this.interval}
浏览 2提问于2020-09-23得票数 0
回答已采纳
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { Button } from "react-bootstrap";
import { FiRefreshCw } from "react-icons/fi";
const Todo = (props) => (
<tr>
<td>{pro
浏览 34提问于2020-12-17得票数 0
3回答
我被一个我不理解的绑定问题所困扰。我在StackOverflow中尝试了所有有关这个问题的绑定方法，但是每次我都有相同的方法。
错误："React不能读取未定义的“的属性'bind‘
Object.getClosestInstanceFromNode" Error2:"TypeError:无法读取__reactInternalInstance$b7iw1elmz95的属性'__reactInternalInstance$b7iw1elmz95‘
因为我已经尝试了所有的东西，我想知道这是否是外部问题绑定的一个真正的问题。
我想做的是，当我点击一个按
浏览 0提问于2017-10-12得票数 1
回答已采纳
当我在setState中使用fetch时，函数会发出两个网络请求，但我希望有一个请求。
为什么会发生这种情况，以及如何预防？
import React from 'react';
class TestFetch extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(()
浏览 3提问于2021-07-08得票数 1
回答已采纳
我正试着建立我的第一个反应计算器。我的按钮好像出了问题(我想)。在用console.log进行测试时，我发现我第一次点击添加按钮并没有更新所有的setStates。相反，第二次单击将正确地更新它。
知道为什么不能用吗？
import React, { Component } from 'react';
class calculator extends Component {
state = {
xxxxx:0,
v1:0,
v2:0,
isCal:null
}
makeAdd =
浏览 0提问于2019-06-23得票数 1
回答已采纳
由于某些原因，我无法在React onClick中设置状态。如果我硬编码"shape1“而不是"shape"，它可以工作，但我想循环通过每个键并动态设置它，因为有可变数量的形状。
resetColors() {
Object.keys(this.state).forEach(shape => {
this.setState({shape: 'black'})
})
}
浏览 2提问于2017-05-22得票数 0
下午好, 我正在尝试设置和清除间隔。我将间隔分配给我的状态，因为尝试在其他任何地方声明它要么是不允许的(当在函数外部声明时)，要么是受到作用域的限制(当在函数内声明时)，或者是因为其他原因而无法访问(当在类外部声明时)。我的代码如下所示(它仍处于测试阶段，所以非常粗糙。它正在做我想让它做的事情，而不是清除间隔)： import React, { Component, lazy, Suspense } from 'react';
const Passersby = lazy(() => import('../components/Passersby'))
浏览 16提问于2020-06-17得票数 0
回答已采纳
3回答
因此，我正在制作一个ToDo应用程序，但到目前为止，我只能创建一个任务，或者删除它。现在，我正在尝试创建另一个功能，在该功能中，我可以通过单击编辑按钮来编辑特定的任务，然后它会将任务更改为一个输入区域，我可以在其中编辑任务名称。有人能帮我一下吗？它现在的样子如下所示。
我现在的代码如下：
import React, { Component } from 'react';
import axios from "axios";
export default class TaskInput extends Component {
constructor
浏览 1提问于2020-05-15得票数 0
我有一个修改按钮，它根据状态属性"modalVisible“的值显示一个模态组件，换句话说，修改按钮会触发一个事件处理程序来更新状态属性，但是由于setState是异步的，所以该模型不能正确显示(有时它显示不正确)
在“react”中单击“修改”按钮后，是否有其他方法可以立即显示模态？
下面是我的代码，我有4个组件：
第一个是Todo组件，它用于显示其他两个组件：DisplayTasks组件(待办事项列表)和(任务完成)，
第四个是Modal组件(只是更改任务名称的输入文本)，在单击“修改-按钮”按钮时显示。
第一个组件文件TaskManagements.js
import React
浏览 2提问于2020-07-30得票数 0
1回答
经过整整两天的反复试验和谷歌搜索，我开始失去理智，真的需要一些帮助。这是我的第二个React业余爱好项目，所以如果它包含任何“不能去的”，请容忍我。 场景:我调用一个API，将数据存储在state (酒店房间)中，首先显示所有房间。在应用搜索之后，我想进一步缩小搜索范围--这是可行的(使用硬编码的值进行测试)。我获取所有可用房间，过滤它们，将它们存储到另一个数组中，然后让该数组显示出来。 问题:我的搜索不是动态的。我可以缩小结果的范围，但我不能“把它们带回来”。例如:如果用户想要根据价格和“允许宠物”缩小房间的范围，它就会显示出来。但是，如果他认为带宠物并不那么重要，并取消选中过滤器，结果将
浏览 12提问于2020-06-26得票数 2
2回答
Splice()方法无效
、、、
在我的React.js应用程序中，我对splice()方法有一些问题。
那么，.删除现在不起作用。这里怎么了？守则的一部分：
class CardList extends React.Component {
static propTypes = {
students: React.PropTypes.array.isRequired
};
// ADD DELETE FUNCTION
deletePerson(person) {
this.props.students.splice(this.props.students.indexOf(person), 1)
浏览 2提问于2016-04-17得票数 2
回答已采纳
2回答
使用JS更改按钮单击时的背景色
、、、、
我想在单击按钮时更改背景，但当我单击按钮时，状态为空，因为我无法更改背景颜色 import React,{Component} from "react"
const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple']
class ChangeBagroundColour extends Component {
state= {
colour:""
}
handleColour= e
浏览 21提问于2020-12-29得票数 0
我正在对UI进行原型化，并从这样的API中获取数据：
componentWillUpdate() {
fetch(this.state.api + this.state.query +".json" + this.state.key)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Oops')
}
})
浏览 3提问于2019-10-31得票数 0
回答已采纳
1回答
我正在尝试将问题和相关选项的集合推送到名为‘quizze’的firebase ref中。当单击submit时，我在控制台中得到以下内容。
Uncaught Error: Firebase.push failed: first argument contains an invalid key ($$typeof) in property 'quizzes.questions.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/
浏览 0提问于2016-10-01得票数 0
1回答
当数字时钟被点击时，我正试图从观看模拟时钟转变为观看数字时钟。我有这两个钟的密码，但我想不出如何使它们改变。我希望能够点击时钟或围绕时钟的<div>，并使它在数字和模拟之间切换。
import React from 'react';
import Clock from 'react-clock';
class ClockFunction extends React.Component {
state = {
time: new Date(),
isAnalogueView: true,
is
浏览 2提问于2020-04-10得票数 0
回答已采纳
//你好问题，当我点击，喝它，安慰，你好，世界，再见，世界，收集，当我点击食物，它显示你好世界，goobye世界，也聚集
class Item extends React.Component {
constructor() {
super();
this.state = {
Card1: 0
} ;
this.state = {
Card2: 0
};
}
handleClick = (button) => {
this.setState({ Card1: button })
};
handel = (event) =&g
浏览 0提问于2018-11-04得票数 0
回答已采纳
我使用的是一个组件中的react下拉树选择。
class PriceComponent extends Component {
constructor(props) {
this.state = {
index: 0,
rate: [{
price: 0,
regions: []
}]
}
}
//add more event
addMore = () => {
this.setState({ ra
浏览 3提问于2020-11-27得票数 2
我的任务是使用react创建我们的在线商店。到目前为止，我已经成功地使用我们正在开发的API中的数据调用了我们的产品，并且我还能够使用链接将数据从映射的产品列表传递到单个产品页面。
现在唯一的问题是，当用户单击产品列表时，我们希望单个产品出现在与产品列表相同的页面上，可能是作为出现在产品列表之上的组件(而不是链接到单独的页面)。在我的生活中，我似乎找不到一种方法，这样做不会导致错误或应用程序读取参数为未定义。承认，我对此反应很新，所以有可能我错过了一些很明显的东西。
，这是ProductList.js
import React, { useState, useEffect } from
浏览 7提问于2022-08-02得票数 0
回答已采纳
import React from "react";
import { UserContext } from "./../contexts";
import {
removeStoredAuthData,
storedAuthIsValid,
storeNewAuthData,
} from "./../utils/auth";
import { getUserInfos } from "./../api/userAuthentication";
class UserProvider extends React.C
浏览 10提问于2020-09-17得票数 0
我有状态中的文本，当我点击div时，我需要将它转换为小写文本。现在我静态地设置文本，这是错误的。我该怎么做？
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { text: "Hello" };
this.toLowerCase = this.toLowerCase.bind(this);
}
toLowerCase() {
this.setState({ text: "
浏览 2提问于2022-10-26得票数 0
回答已采纳
我想将我在#this.calculate中计算的小费推送到tip_arr[]上。因为我无法访问我的第一个项目，因为它显示""，项目，项目。在这里，我的第一个项目是空的，只是字符串。在这里，我计算每个人的小费，他支付多少，然后显示。
导出默认类计算扩展了React.Component {
constructor(props) {
super(props)
this.state = {
amount: '',
tip_per: '',
name: '',
浏览 1提问于2021-04-24得票数 2
我想告诉你“计算.”在反应分量法中进行了大量的同步计算。
这是我的密码。
但不起作用。我希望在第一个setState和第二个setState之后调用render()。
但只有在第二次setState之后才会做出反应。
如何正确切换this.state.calculating？
// note: this is not async function
function myHeavyFunc() {...}
class Foo extends React.Components {
constructor(props) {
super(props);
this.state =
浏览 3提问于2021-11-27得票数 0
回答已采纳
我在同一页上有两个react表，其中包含不同的数据。我可以让用户选择两个表中的多个行。我遇到的问题是，如果他们在一个表中选择任何行，它就会在另一个表中选择相同的行。如何将其设置为仅对所选表格进行样式选择？ 下面是第一个表的getTrProps。 <ReactTable
data={this.state.table1state}
columns={columnNames}
showPagination={false}
minRows={0}
getTrProps={(state, rowInfo) => {
if (row
浏览 39提问于2019-01-22得票数 2
回答已采纳
我已经尝试了很多方法，但每次我想让一个按钮(随机)改变其他许多按钮(选择假期)的文本时，它都会得到相同的结果，每个按钮的值都随机不同，但值不同。这里是一个小示例，如果可以提供帮助的话
class ShiftChange extends Component {
constructor(props) {
super(props);
this.state = {
Off: " Choose Vacation",
rand: "random",
}
}
浏览 0提问于2020-02-24得票数 0
当按钮被点击时，我想生成随机的颜色。请问这是否是产生随机颜色的正确方法？
randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
// --- more code ---
changeHeaderColor() {
console.log("Change_header_color_was_clicked");
this.setState({ colors: "randomColor" });
}
// --- more code ---
render()
浏览 0提问于2020-11-12得票数 1
回答已采纳
我只想知道最好的处理方法(不需要代码，只需要方法)。当我点击LI元素时，我试图显示下拉菜单。
var Balloon = React.createClass({displayName: "Balloon",
getInitialState: function() {
return { shaded: false };
},
handleClick: function(event) {
this.setState({ shaded: !this.state.shade
浏览 3提问于2015-04-28得票数 0
回答已采纳
我有一个问题，我想从子组件中获取值并在父组件中使用它。
这是父组件，我通过props将一个值i传递给它的子组件，我想要取回它，那么我该如何实现呢？
import React, { Component } from 'react'
import { render } from 'react-dom'
import {Row} from 'react-bootstrap';
import Rectangle from './Rectangle.js';
import '../App.css';
class Rect
浏览 0提问于2017-05-01得票数 2
1回答
我有一堆通过ListView组件呈现的产品。一些产品需要更多的配置，即大小，所以当用户点击添加到购物车按钮，我打算显示一个模式内的大小选择。
<ListView
dataSource={this.state.dataSource}
renderRow={rowData => (
<View>
...
<Modal
transparent={false}
visible={this.state.visibleModal}
onRe
浏览 1提问于2018-01-02得票数 0
下面的函数是react-select下拉菜单的onChange事件。仅当下拉列表更改时，this.state.value(以粗体突出显示)才是未定义的。有没有人可以提供同样的信息。但是，该状态是在以下else条件中设置的。
handleSelectChange(val,event) {
var label;
if(val.map==undefined) {
label = val["label"];
this.setState({value:val}) ;
}
else{
label = val["label"];
this.setState
浏览 3提问于2017-11-10得票数 0
从标题本身。我正在学习新的反应，我有一个关于编辑领域的问题。
每当我单击要编辑的特定项目时，其余未选中的项目也将被编辑，如下面的屏幕显示所示。我想知道如何生成唯一的编辑字段框，这些框将只编辑当前选定的特定字段。每次我在editedField上输入一个新项目时，我都会遇到这样的错误。
代码
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Skills extends Component {
constructor(props) {
浏览 0提问于2019-01-28得票数 1
回答已采纳
1回答
我有一个reactstrap Collapse组件，我正在尝试从一个外部Button执行toggle state，该Button位于使用自定义状态变量的映射项的循环中。
我的问题是：
当我的openCollapse方法上有toggle to !state.collapse的状态时，为什么它只open而不是setState !state.collapse组件
我的代码：
// some_items.js (brief example)
// State
this.state = {
toggleCollapse: false
}
// my custom state variable t
浏览 10提问于2019-03-26得票数 0
回答已采纳
3回答
无法读取null的属性
、、、
我试图为图像浏览获得以下代码，然后剪切已浏览的图像：
这是应该使用的代码：
import "./styles.css";
import React, { useState } from "react";
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css'
export default function App() {
const [src, selectFile] = useState(null);
浏览 29提问于2022-12-03得票数 0
1回答
我目前正在使用这个来创建调度程序应用程序。
这是我现在的代码- Scheduler.js
class CalendarScheduler extends Component {
state = {
viewModel: schedulerData,
showBookingDialog: true,
}
handleClickOpen = () => {
this.setState( (prevState) => {
return {showBookingDialog : !prevState.showBookingDialog};
浏览 0提问于2018-10-25得票数 1
回答已采纳
1回答
我刚开始反应，我想知道这是否是从输入表单中获取值的正确方法(某种程度上是质量代码)。进口反应从“反应”；
class Form extends React.Component {
constructor() {
super();
this.state = {
nameValue: '',
ageValue: ''
}
}
onChangeName(event) {
this.setState({
name
浏览 3提问于2017-06-16得票数 5
回答已采纳
1回答
我创建了一个显示价格的表和一个排序函数，但我不知道如何在升序和降序之间切换。 ...//my states
this.compareBy.bind(this);
this.sortBy.bind(this);
};
compareBy(key) {
return function (a, b) {
if (a[key] < b[key]) return -1;
if (a[key] > b[key]) return 1;
return 0;
};
}
sortBy(key) {
浏览 15提问于2019-04-29得票数 0
我使用的是版本： react@16.8.6
react-bootstrap@1.0.0-beta.8 我有一个简单的模态组件： import React, { Component } from 'react'
import { Modal } from "react-bootstrap";
import { ProgressBar } from "react-bootstrap";
class ProgressModal extends Component {
constructor(...args) {
super(...ar
浏览 14提问于2019-06-07得票数 0
回答已采纳
var Comp = React.createClass({
getInitialState: function(){
return {hide: false};
},
toggle: function(){
this.setState({hide: !this.state.hide});
},
render: function() {
return <div>
<button onClick={this.toggle}>toggle</button&g
浏览 0提问于2016-08-05得票数 0
回答已采纳
1回答
我正在努力学习如何在反应中使用表格。
它是一个有选项可供选择的表单。
在onclick事件上，单击的span标记应该改变背景色(只是为了显示它是被单击的)，对于单个标记，我可以实现这一点，但是对于多个标记，如果单击两个标记的单个span bg颜色，则可以实现这一点。
代码：
import React from "react";
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
userClick: true
};
this.handleChang
浏览 2提问于2020-03-03得票数 1
回答已采纳
我尝试了互联网上提供的解决方案，但没有成功。这是。代码如下所示：
//JSX:
<div className="drawer-component" onClick={this.closeDrawer}>
<div className="drawer-opener">
<button onClick={this.toggleDrawer}>Toggle</button>
</div>
{this.state.isOpen && &
浏览 15提问于2019-05-31得票数 0
因此，我想在我的React应用程序中创建一个upvote/downvote组件。下面是一项正在努力这样做的工作。我现在有两个按钮，但我希望有一个按钮，它是向上的第一次点击，然后关闭，当下次相同的按钮是单击。请让我知道我需要做什么改变，以完成这一点。
import React from 'react';
class Upvote extends React.Component {
constructor(props){
super(props)
this.state = {
count: 0
}
浏览 2提问于2020-12-04得票数 1
回答已采纳
我在我的应用程序中构建了一个购物车。流程是这样的：
客户看到一个项目列表并单击他想要的项目；下一页是他选择产品数量的地方，然后我在中保存，然后单击Confirm，他转到购物车，其中包含他选择的相同产品。在此页面(购物车)上，他可以更改数量，在此时刻，总数和数量必须更改(见下图)。
我可以重新加载页面，但在生产环境中页面不能正常工作。我需要在不重新加载页面的情况下执行此操作。
如何在不重新加载页面的情况下做到这一点？
我有3个组件:标题(与图标购物车)，ChooseQuantity和购物车。
请看下面的代码：
//My Choose Quantity Component
import
浏览 0提问于2019-08-09得票数 0
2回答
我遇到了一个问题，我创建了一个功能组件来呈现下拉菜单，但是我不能在主App.JS中更新初始状态，除非它在相同的组件中，否则我不确定如何更新状态。
下面是我的App.js的一个片段，我在其中初始化items数组并调用函数组件。
const items = [
{
id: 1,
value:'item1'
},
{
id: 2,
value:'item2'
},
{
id: 3,
value:'item3'
}
]
class App extends Componen
浏览 3提问于2020-08-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
