如何在事件点击时为setState编写回调函数
在React中，可以通过编写回调函数来为setState方法处理事件点击。setState方法用于更新组件的状态，并重新渲染组件。
编写回调函数的步骤如下：
- 首先，在组件的构造函数中初始化状态。可以使用this.state来定义一个状态变量，例如：
constructor(props) {
super(props);
this.state = {
count: 0
};
}- 接下来，在组件中定义一个处理事件点击的回调函数。回调函数可以是类方法，例如：
handleClick() {
this.setState({ count: this.state.count + 1 });
}- 在组件的render方法中，将回调函数绑定到事件上。例如，将回调函数绑定到按钮的点击事件上：
render() {
return (
<button onClick={this.handleClick.bind(this)}>点击按钮</button>
);
}在上述代码中，通过bind方法将回调函数绑定到按钮的点击事件上，并使用this.handleClick.bind(this)来确保在回调函数中可以正确访问组件的上下文。
这样，当按钮被点击时，回调函数会被触发，调用setState方法更新组件的状态。在这个例子中，每次点击按钮，count的值都会加1。
这种方式可以用于处理各种事件，例如表单输入、鼠标移动等。通过编写回调函数，可以实现在事件点击时更新组件的状态，从而实现动态的用户界面。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
相关·内容
我在Reactjs有一个新手，这肯定是一个简单的问题。我没发现。但它不起作用。可能已经有人问过了
class App extends Component {
constructor() {
super()
this.state = {
currency: '',
excurrency: '',
amount: ''
}
}
<input id='amount' type='text' onChange={(amount) =>
浏览 23提问于2020-02-14得票数 0
回答已采纳
1回答
//sample piece of codes
constructor() {
super()
this.state.opacity= '0'
this.state.mover = 'translateY(-40%)'
}
this.setState({opacity:'1'})
this.setState({mover: 'translateY(-900%)'}, () => {this.setState({opacity:'0'})})
当我点击一个按钮，我想要一个div出现(使用
浏览 2提问于2021-08-13得票数 1
回答已采纳
我有一个要求，当用户点击注销按钮，通过第三方网址，我们必须注销的application.When这样做，它会显示在那里的屏幕。想在没有ajax的情况下实现，这样我就能够在成功完成后点击第三方URL，它应该显示我的应用程序登录页面。注意:我们不能在第三方URL中进行任何代码更改。
浏览 20提问于2019-02-01得票数 0
我在查看redux的文档，文档中没有回调字段。但是在setState方法中有回调。调度方法不负责setState函数吗？如何在redux的调度方法中进行回调？
浏览 3提问于2018-11-21得票数 3
回答已采纳
我正在使用puppeteer来收听点击事件。我还想知道被点击的html元素的id。我如何做到这一点呢？我现在的代码如下： const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
let browser = await puppeteer.launch({ headless: false });
let page = await browser.newPage();
// Expose a handler to the page
await pa
浏览 120提问于2020-10-12得票数 1
当我在useEffect参数中使用来自组件的函数时，我知道我应该编写一个callback，以便将它作为useEffect的依赖项来记忆和使用，否则就会有一个警告，但是当我使用setState of useState时，为什么不需要编写回调。它是默认记忆的吗？与组件中的方法不同，setState of useState是如何工作的？
const [username, setUsername] = useState(undefined)
const [password, setPassword] = useState(undefined)
const onSuccessfulLogin = u
浏览 0提问于2020-07-13得票数 0
回答已采纳
在这个中
侦听器
当发生指定类型的事件时接收通知的对象(实现事件接口的对象)。这必须是一个实现EventListener接口的对象，或者只是一个JavaScript函数。
它说我们可以使用an object that implements the Event interface作为事件的侦听器。
但是我找不到对象如何实现事件接口。当我试着：
document.querySelector('#demo').addEventListener('click', {
handleEvent: function (e) {
console.log(
浏览 6提问于2016-11-01得票数 7
回答已采纳
在setState更新后，我必须调用2个函数。我想使用回调函数。但问题是，一个函数存在于当前组件中，另一个函数是我正在调用的子组件的另一个函数(使用refs)。代码看起来像这样：
handleChange_First = (event) => {
const name = event.target.name;
this.setState({
[name]: event.target.value
},() => {this.calculate()});
this.child.handleChange(event)
浏览 0提问于2019-11-27得票数 1
单击下图中的任意点，我希望显示与该点相关的一些信息。但是，当我使用setState方法更新点击事件的以下信息时，图形正在重新构建。我想在这个时间序列图中的某个时间放大，但是重建图是一个问题，并且不能看到图上的标签。如何使用setState方法更新以下信息，而无需重新绘制图形？
在下图中，Angle值应为15.0，但如果没有setState，则不会进行更新
浏览 4提问于2019-10-16得票数 7
我是Vert.x的新手，我准备做一个小例子，每次我从某个外部服务器读取当前时间时，我都会得到一个指向根路径的GET-request。我以为使用launch和awaitResult就可以为我处理异步部分，但是日志只告诉我线程阻塞了。对外部url的请求大约需要5到7秒。使用较快的url是可能的，但我有意使用较慢的url来感受Vert.x的异步方面。
有人能帮帮我吗？我在协程中做错了什么？
class MainVerticle : CoroutineVerticle() {
override suspend fun start() {
val server = vertx.c
浏览 132提问于2018-02-22得票数 1
回答已采纳
当我的导航栏上的一个标签被点击时，我试图调用两个方法。我最初只调用了一个方法，直到我意识到我需要调用第二个方法来更新我的数据。问题是，当我尝试同时调用这两个方法时，只执行其中一个，而不是两个都执行。我以前在onClick方法中有多个函数，它们工作得很好，但我有点搞不懂为什么这种方式不能工作。任何帮助都是最好的，谢谢！ app.js export default Class App extends React.Component{
constructor(props){
this.state = {
OpenJobsDB: [],
PendingJobsDB: [],
浏览 28提问于2019-09-24得票数 0
回答已采纳
我有一个简单的点击处理程序，它在这种情况下可以工作：
handleClick = () => {
const { isCalendarOpen } = this.state;
this.setState ({ isCalendarOpen: !isCalendarOpen });
};
但是我必须在setState中使用回调函数，所以我尝试这样做：
this.setState(state => ({
isCalenderOpen: !state.isCalender
浏览 3提问于2018-12-10得票数 0
1回答
我在同一个页面上有几个活动的ACE编辑器，每个编辑器都应该触发一个"on change“事件。
editor[iGr].getSession().on('change', function(e) {
// e contains the change type and data
some_code...;
});
我如何在回调函数中知道是哪个编辑器触发了它？发送到回调的传统"e“对象只有数据更改本身的信息，而不是编辑器本身的信息。在我的例子中，"this“对象不是信息性的(一个包含本机代码的未命名函数数组)。
浏览 8提问于2017-02-10得票数 0
我正在尝试为一个onClick加号图标设置一个FontAwesome函数。图标只出现在没有子元素的元素旁边(也就是在我的嵌套菜单中，其中没有更多的元素)。当我通过做测试onClick时，console.log似乎在任何时候单击菜单中的一个元素，它都会触发两次或四次。有人知道当点击加号图标时，我能做些什么才能使它启动吗？或者当单击任何元素时，它为什么会触发？有关更多细节，请参见下面的截图。
class MenuTest extends React.Component {
state = {
categories: [],
objectKeys: null,
tempK
浏览 1提问于2019-05-12得票数 2
回答已采纳
我在一个按钮上写了一个onClick事件来设置一个value: 0，但是在第一次点击时，它给出了一个“未定义”的值。
我在构造函数中将value的状态设置为null
处理程序函数代码
sitHandler = () => {
this.setState({
robotButtons: { value: 0, eventTime: Date.now() }
});
//am calling a socket here to send these new setState 'robotButtons'
data
console.log
浏览 0提问于2018-11-02得票数 0
3回答
因此，我已经开始通过做类组件来学习React。在那里，据我所知，如果我
this.state = {
isLoading: false,
dataToRender: [],
}
this.setState({ isLoading: true }, async () => {
const data = await fetchData();
this.setState({ dataToRender: data , isLoading: false });
})
const message => <p>loading...</p>
if (isL
浏览 0提问于2021-11-15得票数 1
回答已采纳
使用React的setState()方法有以下两种不同之处：
setState({key: value}, myFunction())
与
setState({key: value}, () => myFunction())
浏览 3提问于2018-04-09得票数 0
回答已采纳
1回答
我试图在父组件中显示子组件的状态，但不知何故，文本"abcde“仍未显示，下面是示例代码
import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-ui-lib';
class ChidComponent extends React.Component {
constructor(props) {
super(props
浏览 2提问于2021-12-11得票数 1
回答已采纳
每当我触发readItem()和handleChange()之后，浏览器都会抛出错误"this.setState不是一个函数“。除此之外，HandleChange()也能很好地工作。有人能告诉我是什么导致了这个错误以及如何修复它吗？我还期望readtItem()函数更新状态，但这并没有发生。任何帮助都将不胜感激。 谢谢 import React from 'react';
import ListItems from '../src/components/ListItems/ListItems.component';
import Button from
浏览 25提问于2020-10-10得票数 0
回答已采纳
单击Submit调用我的onSubmit函数，其中它做了两件事：
setState for formValidity (bool)
提交表格
问题是，它在第一次单击时失败，并且只在第二次提交。据我所知，虽然它还没有设置状态，并且在第一次运行时就失败了，但它还是来自提交。
我希望onSubmit预编格式setStates，只有在一次点击发送邮件时才能预置setStates。
请注意：，我尝试过拆分这个函数，结果也是一样的。
我假设这里会有一个回调，但我不知道如何在ES6中正确地应用这个方法。
渲染元素：
<button onClick={(event) => this
浏览 0提问于2018-04-02得票数 0
我正在使用REACTJS，NODEJS开发一个简单的登录应用程序。我正在从后端接收状态代码(比如201,202)，并在开关用例中匹配它们，现在我想尝试一下，当Case 201是真正的用户路由/重定向到应用程序中的下一个页面时，但是当我使用TypeError函数时:这是未定义的<代码>E 211</ code >，所以任何人都会在这个问题上指导我。
class Login extends Component {
constructor(props) {
super(props)
this.state =
浏览 0提问于2019-12-12得票数 0
关于调用setState的匿名函数，我有一个问题。我试图做一个基本练习()，当你点击它时，按钮上显示的数字会增加。
function Button() {
const [state, setState] = useState(1);
return <button onClick={() => setState(state+1)} >{state}</button>;
}
ReactDOM.render(
<Button />,
document.getElementById('mountNode'),
);
我不
浏览 6提问于2020-12-13得票数 0
回答已采纳
我正在将事件侦听器附加到页面上的按钮上。单击时，它将运行一个函数。
harvestDataBtn.addEventListener("click", harvestData, false);
该函数可以选择一个值。
function harvestData(idsToHarvest)
我不希望点击按钮将任何东西传递到函数中。可选变量idsToHarvest用于正在调用的函数的其他实例，与单击分开。
但是，当我单击该按钮时，idsToHarvest是一个鼠标事件。使下面的代码在我的函数中不能正常工作。
if ( idsToHarvest ) {
// do something
浏览 0提问于2018-01-31得票数 0
回答已采纳
我通常编写这样的代码(用于重用)：
function doSomething() {
// I do something with this.state.MyVar
}
function buttonClicked(e) {
this.setState({MyVar: e.target.value}, this.doSomething());
}
function otherEvent(e) {
this.setState({MyVar: e.target.value}, this.doSomething());
}
一旦调用了doSomething()，这个值与e.targe
浏览 2提问于2016-11-03得票数 0
回答已采纳
假设我有一个名为capturedata();的javascript函数，我需要在单击此按钮时调用此函数
<button id='yes'></button>
出于某些原因，我不想在html上使用任何像onclick='capturedata()'这样的事件处理程序，现在我这样使用了Jquery
$(document).ready(function(){
$("#yes").click();
capturedata();
});
但这是行不通的。我需要一个更好的方法来处理这个问题，并且我不想在html上使用任何像o
浏览 9提问于2018-02-26得票数 0
回答已采纳
下面是一些React/JS代码:在以下两种代码之间是否有区别：
setState({var1: ...., var2: ...}, this.callback_function);
和
setState({var1: ...., var2: ...});
this.callback_function();
非常感谢
浏览 2提问于2021-04-10得票数 0
回答已采纳
这两种功能的主要区别是什么？
handleOnChange(evt) {
this.setState(() => ({
tickerName: evt.target.value
}));
}
handleOnChange(evt) {
this.setState({ tickerName: evt.target.value });
}
为什么使用直接改变状态的handleOnChange()函数，这很好呢？
<input
type="text"
value={this.state.tickerName}
浏览 6提问于2018-01-03得票数 2
回答已采纳
这是来自github页面的代码片段
onChangeHandler = (input, value, files) => {
if (files) {
generateBase64FromImage(files[0])
.then((b64) => {
this.setState({ imagePreview: b64 });
})
.catch((e) => {
this.setState({ imagePreview: null });
});
浏览 0提问于2020-11-16得票数 0
我使用以下代码：
handleOwnerMode = ownerChecked => {
this.setState(prev => ({ ownerChecked, showOwner: !prev.showOwner}))
// this.setState(prev => ({ ownerChecked: !prev.ownerChecked, showOwner: !prev.showOwner }))
}
在渲染中是
<Switch onChange={this.handleOwnerMode} checked={this.stat
浏览 1提问于2019-03-26得票数 0
回答已采纳
在React中，我们使用setState更新组件的状态。setState是一个异步进程，所以如果我们在同一个函数中有多个setState。
问题：如何在内部处理更新的批处理？
场景1:
在componentDidMount中的for循环中更新状态，但在相同的执行周期中更新状态。
class TodoApp extends React.Component {
constructor(props) {
super(props)
var state = { count: 0 };
Object.defineProperty(this, 'state'
浏览 0提问于2019-09-10得票数 1
回答已采纳
如何在autocomplete的onChange方法中传递索引。如果我将索引硬编码为零，我可以设置ItemNumber的状态。但是在这样设置索引时遇到了麻烦。有没有人能指引我。 import React from 'react';
import './style.css';
import Autocomplete from '@material-ui/lab/Autocomplete';
export class Item extends Component {
constructor(props) {
super(props)
浏览 29提问于2021-09-29得票数 1
回答已采纳
我想在react native中验证我的登录表单。但我在react本机中使用了另一个Firebase日志函数在onChangetext中。这是我的onPress函数，在登录按钮按下。
async onLoginPress() {
this.setState({ errorMessage: null, loading: true });
const { email, password } = this.state;
console.log(email);
console.log(password);
firebase
.auth()
浏览 0提问于2018-09-19得票数 0
我刚接触react和javascript，在尝试从promise中检索一个值以便它可以用于操作时遇到了麻烦。我做了一些研究，看到了很多promise教程，它们可以返回控制台日志或运行函数。但是我还没有看到一个允许我保存到const/var的方法，这样我就可以用于其他操作，比如setstate。 我尝试了一种不同的方法来解析异步函数中的promise，这样我就可以执行setstate，但它们都失败了，我已经尝试了3种方法，其中哪种方法记录了正确的信息，但当我设置setstate时，它就失败了。 这是我的react组件的一个示例 state = {
user: {}
}
浏览 23提问于2019-03-11得票数 0
2回答
这里我有这样的代码
h(e) {
console.log(e.target.value);
this.setState(state => {
return {editData: e.target.value};
});
}
但它不起作用。E- event - in setState函数变为null。有可能做这样的事情吗？
浏览 0提问于2019-07-27得票数 0
日安！ 是否可以在onClick事件上触发多个函数？ 我喜欢当用户点击我的按钮到setState，然后运行一个函数。我设法更新了我的状态，但我不确定如何继续添加第二步，即运行名为"goToOrderTemplate()“的函数。 <button
type="button"
className="btn btn-primary"
style={{ width: 250 }}
onClick={() =>
this.setState({
auth: this.passwordValidation()
浏览 18提问于2019-03-03得票数 2
回答已采纳
正在按照本教程制作一个简单的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
回答已采纳
在颤振中使用MapBox时，似乎没有一种直接的方法来检测缩放级别的变化。对于Flutter之外的实现或本机SDK的on，存在着各种引用，但是它们的对应项就很难找到。请告诉我文档或代码示例，以检测缩放级别的变化。
浏览 2提问于2021-03-16得票数 1
1回答
我只是想知道是否有任何可能的方法来使用Tkinter将单击事件绑定到画布上。
我希望能够点击画布上的任何地方，并有一个对象移动到它。我可以提出议案，但我还没有找到将单击绑定到画布的方法。
浏览 0提问于2015-03-23得票数 22
回答已采纳
1回答
我在目标c项目中使用c++库。
我集成了c++库并实现了.mm文件来桥接c++和目标c。
我可以使用这个c++桥从目标c成功地调用.mm函数。
问题是给定c++库中的方法没有返回，即无效。例如，void登录( const char* email，const char*密码)；
这个c++库实现了回调函数，以了解此登录方法的结果。
示例：
class DemoApp : public XClass
{
int urandomfd;
public:
uint32_t dstime(void);
FileAccess* newfile();
void reques
浏览 2提问于2013-06-26得票数 2
3回答
在一个按钮点击，我有一些更长的进程(compileProject，这是同步的)。设置state.compiling时，它应该显示一个旋转器，但是UI会冻结，直到编译完成为止。如何更新UI？
this.setState({ compiling: true }, () => {
compileProject(this.state.project)
this.setState({ compiling: false })
})
浏览 0提问于2018-11-29得票数 2
回答已采纳
我需要在不同的按钮点击时加载不同的API urls： 下面是API组件： const companiesUrl = "http://localhost:3005/local-companies-xxx";
class Companies extends Component {
state = {
companyDetails: [],
currentPage: 0
};
get items() {
const {currentPage, companiesDetails} = this.state;
浏览 27提问于2019-12-13得票数 0
回答已采纳
我需要在点击时调用数据标签上的function函数。我没有答案。我用的是高图集
chart: {
type: 'column',
zoomType: 'y'
},
dataLabels: {
enabled: true,
useHTML: true,
formatter: function () {
re
浏览 2提问于2020-06-06得票数 0
回答已采纳
我对混合移动应用程序开发是个新手。通常，我的移动应用程序的前端是用ionic、cordova和angular.js开发的，后端是.net。这就是我想要实现的场景
在我的移动应用程序中，当用户处于在线模式(与互联网连接)时，应用程序会自动连接到远程数据库(主机在其他地方)，并加载保存在远程数据库中的用户模板。实际上，模板包括每个类型的用户窗口，成人用户的示例登录窗口，年轻用户的登录窗口，儿童和etc.So的登录窗口，然后用户可以为他/她选择正确的模板。
下一部分对我来说是比较复杂的部分。
当用户处于在线模式时，应用程序应从远程数据库下载所有模板并将其保存在移动device.Then的本地存储中当
浏览 2提问于2015-09-21得票数 0
是否不建议在事件中使用更新的setState语法？在调试过程中，我看到我输入的第一个字母带有一个适当的e.target.value。不过，之后我立即得到了TypeError，如下所示。
// onChange(e) {
// this.setState(prevState => {
// return { username: e.target.value} <--- TypeError: Cannot read property 'value' of null
// })
// }
//显然，下面的setState运行良好
onChan
浏览 0提问于2018-08-17得票数 1
回答已采纳
const [state,setState]=useState(0)
return(
<>
{state}
<div onClick={setState(1)}></div>
</>
)
//Error
//Too many re-renders. React limits the number of renders to prevent an infinite loop.
当我们使用{onClick={()=>setState(1)}}时，代码可以工作，但是我想知道为什么在第一种情况下它不能
浏览 14提问于2022-10-31得票数 1
1回答
我有一个屏幕，上面有一些选项。如果选择该选项，则会设置数据的状态。然后我就有了一个确认按钮。如果用户点击确认，我会进行一个异步调用来获取一些额外的数据。我想在打开模式之前等待它发生，因为我需要在我的模式中呈现额外的数据。
在钩子之前，我会使用setState并执行类似于：this.setState({data: myData}, () => this.openModal())的操作，因为这样可以可靠地设置状态，然后打开模式。网上的所有答案似乎都建议使用useEffect，但这样做似乎不太可靠：
useEffect(() => {
if (data) {
se
浏览 0提问于2021-02-20得票数 1
我有以下代码，我收到了两个警告：
警告:无法对未挂载的组件执行反应状态更新。这是一个非操作，但它表示您的应用程序中存在内存泄漏。若要修复，请取消useEffect清理函数中的所有订阅和异步任务。unmountComponentAtNode()：要卸载的节点是由另一个React副本呈现的。
import React, { useState, useEffect } from "react";
import GravatarList from "./GravatarList";
import Header from "./Heade
浏览 7提问于2022-02-09得票数 3
我有一个名为displayData的页面。在上面有一个按钮，如果我点击它，它显示DraggableScrollableSheet，通常它有一个按钮，当我点击它时，面包店(DisplayData)上的页面图标必须更改.i，在setState中使用一个变量，但是它不能工作，它在DraggableScrollableSheet上是正确的，但是在显示数据时总是错误的，任何帮助！
浏览 4提问于2022-06-30得票数 -2
是否可以访问React中主组件中的子组件属性？
例如，我正在尝试这样做:我有一个主组件MyComponent和一个呈现按钮的SubComp子组件。是否可以将MyComponent的状态设置为单击的SubComp的tex属性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.b
浏览 2提问于2020-12-22得票数 1
回答已采纳
在setState之后有以下匿名函数回调：
processOnBlur(event) {
this.setState({
input: event.target.id
}, (event) => {
console.log(event.target.id);
});
}
但是，回调中的event未定义。如何将事件对象传递给该回调？有可能吗？
浏览 5提问于2016-05-23得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
