React:在onClick事件中调用函数时，为什么参数为空？
React是一个用于构建用户界面的JavaScript库。在React中，onClick事件是用于处理元素被点击时触发的事件。当在onClick事件中调用函数时，如果参数为空，可能有以下几个原因：
- 函数没有传递参数：在调用函数时，可能没有传递任何参数。这可能是因为函数本身不需要参数，或者是因为在调用函数时忘记传递参数。
- 事件对象作为参数：在React中，onClick事件会自动传递一个事件对象作为参数给调用的函数。这个事件对象包含了与事件相关的信息，如事件类型、触发事件的元素等。如果函数需要获取事件相关的信息，可以在函数定义中接收事件对象作为参数。
- 参数未正确传递：在调用函数时，可能参数没有正确传递。这可能是因为函数调用的方式不正确，或者是因为参数的值不正确。
为了解决参数为空的问题，可以按照以下步骤进行检查和修复：
- 确保函数需要参数：检查被调用的函数是否需要参数。如果函数不需要参数，可以直接调用函数，不需要传递任何参数。
- 检查函数调用方式：确保在onClick事件中正确调用函数，并传递正确的参数。可以使用箭头函数或bind方法来确保函数在调用时传递正确的参数。
- 检查参数的值：如果函数需要参数，确保传递的参数值是正确的。可以使用console.log()或调试工具来检查参数的值是否正确。
总结起来，当在React的onClick事件中调用函数时，参数为空可能是因为函数不需要参数，参数没有正确传递，或者是忘记传递参数。通过检查函数的需求、调用方式和参数的值，可以解决参数为空的问题。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我是一个反应新手，想问一些对你们来说很基本的问题。！！因此，atm，我正在学习如何使用State，这是我在代码学院课程中找到的一些示例代码。
import React, { useState } from "react";
function Toggle() {
const [toggle, setToggle] = useState();
return (
<div>
<p>The toggle is {toggle}</p>
<button onClick={() => setT
浏览 2提问于2021-05-17得票数 0
回答已采纳
3回答
假设我有这个组件
class Foo extends React.Component {
onClick = () => {
alert('Yay');
this.props.setWhatever()
}
render() {
return (
<Bar>
<input
type='radio'
checked={this.pr
浏览 1提问于2019-05-20得票数 1
回答已采纳
1回答
当用户单击列表中的项目时，我试图显示/隐藏一个模式。模式按计划显示，但不能隐藏。当调用_dismiss()时，setState会执行，但是当我在回调中调用state时，参数show仍然是真的。
为什么会发生这种情况？
Message.jsx
export default class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false
};
this._onCl
浏览 0提问于2017-04-03得票数 0
回答已采纳
我试图理解为什么当我试图设置子组件按钮onclick事件的状态时，它会导致递归循环。
例如，此代码生成错误：
import React, { useState } from "react";
export default function App() {
const [formState, setFormState] = useState({ name: "Joe" });
return (
<div className="App">
<Child state={formState} setSta
浏览 4提问于2020-10-31得票数 1
回答已采纳
下面有反应成分。为什么在调用changeNameTwo时没有定义changeNameTwo？
见jsbin：
那么为什么它在典型的ES6类中工作呢？见jsbin：
class HelloWorldComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name : 'yolo'
}
}
changeName = () => {
this.setState({name: 'another yo
浏览 4提问于2016-06-11得票数 0
2回答
React中(1)和(2)的区别是什么？
onClick={()=>handleDelete(id)} -------(1)
onClick={handleDelete(id)} ----------(2)
为什么(2)导致无限循环，而(1)工作得很好？
我在react中找不到任何关于onClick的文档，因为它只能接受函数。对于Html属性与react的不同之处，我也有点困惑，因此任何文档链接都会受到高度赞赏。
所讨论的代码片段：
<button
className="btn btn--danger"
onClick={()=>handle
浏览 5提问于2022-08-17得票数 0
回答已采纳
2回答
我为react元素设置了一个静态id，并将onClick listener设置为组件，我将事件对象作为参数传递给listener函数，而event.target.id是一个空的string，我如何获取被点击元素的id？
如果我没有调用event.persist()，我得到的所有值都是null，为什么会这样呢？
sendDisplayType = (event) => {
event.persist();
console.log(event);
}
<div id="mission" onClick={this.sendDisplayType} class
浏览 4提问于2019-09-19得票数 0
import React from "react";
const FunctionClick = () => {
const clickHandler = () => {
console.log("Button clicked.");
};
return (
<div>
<button onClick={clickHandler}>Click</button>
</div>
);
};
export default FunctionClick;
{在
浏览 6提问于2020-09-27得票数 2
回答已采纳
我在ReactJS中构建了一个简单的计数器应用程序。密码在下面。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [countNum, setCountNum] = useState(0);
function increaseCount() {
setCountNum(countNum + 1);
}
function decreaseCount() {
浏览 5提问于2021-11-01得票数 4
回答已采纳
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
我有反应元件
import React, {useState} from 'react';
function App() {
const [number, setNumber] = useState(12);
return (
<>
<h1>Number value is: {number}</h1>
<div className="btn btn-success" onClick = {() => setNumber(number + 1)}>Add</div&
浏览 5提问于2021-03-12得票数 0
回答已采纳
我想问一个关于ReactJ中的“事件处理程序”的基本问题。
下面是一些React组件的示例：
import React from 'react'
class Hello extends React.Component {
handleClick = () => {
console.log("clicked");
}
render () {
const { isDisabled = false } = this.props;
return (
<button onClick={() => isD
浏览 6提问于2020-01-01得票数 0
回答已采纳
2回答
我有两个档案(父母和孩子)。我希望孩子们称呼父母的功能。没问题，我能做到。另一方面，当我对函数进行论证时，我无法从父母那里得到它们.
父级：
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon f
浏览 1提问于2019-08-18得票数 1
回答已采纳
我在这个中找到了下面的代码。()我不知道为什么这些按钮的行为会有所不同。
一个可能的解释是:因为没有调用button的render方法来进行更新，所以第一个按钮的单击处理程序保持不变。但是，Button实例的this.props已经更改为包含新的onClick支柱。换句话说，如果更改了一个shouldComponentUpdate组件元素的道具，那么即使返回false，nextProps也将最终成为this.props。
const submit = val => alert(val);
class App extends React.Component {
state = { va
浏览 2提问于2019-01-05得票数 0
回答已采纳
我最近几天都在学习反应钩子，但我不明白为什么我会犯这个错误。
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loo
使用状态变量
const [count, setSamplePageData] = useState(0);
在onclick中更改状态
<button className="btn-primary" onClick={setSamplePageData(1)}>
浏览 3提问于2022-04-12得票数 2
回答已采纳
4回答
我有一个用javascript和React写的应用程序。当在iOS上的Safari中单击按钮时，onClick将执行其主体中指定的函数，但是该函数接受另一个函数作为回调函数，并且该回调函数不会被触发。
如果我只是发送没有匿名函数的回调函数，它就能工作。但是如果我使用匿名函数来调用回调，它就不能工作。
下面的代码摘自React类的render()-method。
这在iOS上的Safari中不起作用(但在iOS上的Chrome中很好用)：
<button className="button-top-level" data-selenium-id="preview&#
浏览 2提问于2019-05-22得票数 0
3回答
在官方反应教程中，他们首先编写类组件：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
然后让它成为一个功能组件
function Square(props) {
return (
<button classNam
浏览 3提问于2021-06-10得票数 2
回答已采纳
我正在尝试遵循React的规则，使用他们对ES6类推荐的模式：
class Foo extends React.Component {
constructor() {
super();
this._onClick = this._onClick.bind(this);
}
render() {
return (
<div onClick={this._onClick}>
Hello!
</div>
);
}
_onClick() {
// Do whatever you
浏览 2提问于2017-02-15得票数 9
在里，上面写着
执行onClick={alert('click')}将立即发出警报，而不是单击按钮。
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}
但是，我不明白为什么.有人能帮我澄清一下
浏览 1提问于2017-06-05得票数 8
回答已采纳
我在学习react时遇到了这个codePen 。我试着做了几次修改，最后出现了“太多的重呈现”错误。
而不是
const handleClick = () => setCount(count + 1);
我试图将参数传递给handleClick函数
const handleClick = (x) => setCount(x + count + 1);
在我的报税表中，我改变了
<button onClick={handleClick}>
我加了
<button onClick={handleClick(1)}>
当我运行它时，我得到
Error: Too m
浏览 1提问于2020-01-30得票数 1
回答已采纳
2回答
为什么要将onClick回调设置为三个参数？
nativeEvent可以通过proxyEvent.nativeEvent。为什么在第三个论点中反应set nativeEvent。
如果我点击按钮，console.log(args)给我Proxy, undefined, Event，第三个参数不是我想要的。
但是在componentDidMount中，调用this.clickHandler，它给了我null, null, 'b2c'，第三个论点'b2c‘，这就是我想要的。
class ReactEventArgument extends React.Component
浏览 1提问于2016-10-20得票数 2
回答已采纳
2回答
我是新的反应，我试图构建一个非常基本的时间表工具，用户可以添加任务到应用程序和保存。我用的是“反应”和“打字稿”。
到目前为止，我的主要组件包括一个空的任务数组和表。然后，在表主体中，我映射了表行和包含标记的单独组件。
在表的顶部，我包含了一个按钮，当单击该按钮时，应该创建一个新的任务数组(因此不能修改状态)，然后将concat方法添加到新的项数组中，并添加新任务。当点击“添加项目”按钮时，什么都不会发生，有人能告诉我我做错了什么吗？如果这是实现这一目标的最佳途径呢？
主要构成部分：
import * as React from 'react';
import { ITimes
浏览 0提问于2019-10-19得票数 4
回答已采纳
我正在创建一个带有function的简单计算器，并且我试图向一个按钮中添加一个onClick函数。我使用的技术与tictactoe游戏的react教程中使用的技术相同，但是当我单击任意按钮时，我只会得到以下错误消息：
Uncaught TypeError: this.handleClick is not a function
at onClick (index.js:71)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDe
浏览 3提问于2020-04-18得票数 2
回答已采纳
我正在尝试创建2种类型的开关，其中之一将需要访问单击事件。我已经将我的道具接口如下： interface SectionProps {
title: string;
options: {
flavorText: string;
toggle: (e?: React.MouseEvent<HTMLDivElement>) => void;
checked: boolean;
};
inputStyle: SelectionsType;
/**an array of desired tile
浏览 21提问于2020-11-05得票数 0
回答已采纳
3回答
我有个功能，像这样：
menu[0].onclick = function() {
filters.reset_all();
clients.get();
}
因此，当用户单击第一个菜单元素时，就会调用它。现在我需要把它称为另一个地方，我所做的就是：
if (li.onclick) { //li and menu[0] above are the same
li.onclick.call();
}
而且效果很好。
但是现在我需要将一些参数传递给onclick函数。我尝试过这个.call(some_param);，但是arguments数组在onc
浏览 4提问于2012-09-04得票数 0
回答已采纳
我正在尝试使用React创建一个HTML列表。所有操作都很好，但是我在分配给<li>-tag的单击事件中得到了一些奇怪的行为。这里有两种代码，其中一种有效，但另一种不起作用。
这两种代码的不同之处在于我将onClick事件分配给<li>-tag的方式。
在不工作的代码中，我告诉我所说的onMenuClick函数( area )。在加载页面时，我会将此方法激发三次。
在工作代码中，我不为onMenuClick函数提供任何参数。不过，在这里，我不知道是哪个<li>-tag引发了这一事件。不过，我需要知道，因为我想对此做出反应。
为什么事件在不工作的代码中触发三次
浏览 0提问于2016-01-23得票数 1
回答已采纳
import React , {useState} from 'react';
function Test() {
const [addtolist, Setaddtolist] = useState();
const Onclick = () =>{
Setaddtolist('Button Clicked');
//I need the state in this function
console.log(addtolist)
}
浏览 0提问于2021-03-31得票数 0
1回答
我正在尝试测试我的一个组件。它是一个来自Material的NavigationDrawer，它有一个名为toggleDrawer()的道具，它就是这样做的，并且可以切换抽屉。
每次组件呈现时，它都在1ms - 2ms的范围内调用toggleDrawer()函数10次。我很难理解它为什么要这样做，如果可能的话，我想解决这个问题。
这是构成部分：
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/cor
浏览 0提问于2018-12-14得票数 0
回答已采纳
我的问题是当单击一个onClick时，React中的一个div事件的流。
我的应用程序有一个ParentComponent，它调用一个ChildComponent，然后为ParentComponent中的props.options数组的每个成员创建一个div。
我有两个问题：
单击div时，如何将onClick事件传递给该组件？
div如何知道是哪个option创建了它？我的意思是，this.props.options数组的一些迭代，比如说，optionA创建了，比如说，divA，divA是如何知道它是由optionA而不是optionB创建的？这是通过内部反应完成的吗？
这是
浏览 2提问于2020-04-20得票数 1
回答已采纳
我是React的新手，我正在使用React和Material-UI构建一个个人投资组合，作为我的第一个项目，使用我在过去几周中学到的知识。
当我尝试构建一个简单的切换器，在点击按钮时从右侧弹出一个侧面导航，我在React中得到了一个" error : too code renders“错误，并在Navbar.js中使用了以下相关代码：
// states
const [state, setState] = useState({
right: false
})
const toggleSlider = (open) => {
setState({right: ope
浏览 0提问于2020-07-28得票数 0
当我们有一个预定义的JS函数时：
function myFunction() { script }
为什么当我们在HTML的事件(例如onclick)中调用它时，我们使用参数括号：
<button onclick="myFunction()">Sumbit</button>
而当我们从JS调用它时，我们使用不带括号的函数名？：
document.getElementById("button").onclick = myFunction;
浏览 2提问于2018-03-25得票数 1
在学习HTML事件处理程序和React的过程中，我理解了在HTML中，事件处理程序的值，例如一个函数，后面应该有圆括号。据我所知，JSX元素是在React中编写类似于元素的html的另一种方式，但是当我们编写这些元素时，我们应该省略括号，我不明白为什么？如果它们表示类似HTML的元素，那么它们的行为不应该是一样的吗？
<button onClick={shoot}>JSX element!</button>
<button onclick="shoot()">HTML element!</button>
浏览 0提问于2020-11-21得票数 1
1回答
我是新来的反应。在遵循时，我跟踪它们并使用create-react-app创建了一个示例待办事项列表项目。我只对App.js文件进行了更改，如下所示：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
todos:
浏览 0提问于2018-07-13得票数 1
回答已采纳
4回答
学习通过教程做出反应，我不明白为什么我必须创建一个新函数才能传递给一个JSX onClick，而不能只使用从React useState调用返回的函数。
下面的工作方式是在单击按钮时调用handleButtonClick，但是如果我只是用字符串传递setMessage函数调用，它就不能工作。
Works:
function App() {
const [message, setMessage] = React.useState('Javascript is so cool');
function handleButtonClick() {
setMessage
浏览 9提问于2020-01-02得票数 3
回答已采纳
2回答
理解useState和输入逻辑
、、、、
当我单击一个按钮(目前我有一个函数)时，我很难让我的UseState显示自己，该函数使用usestate并在屏幕上显示我的值，例如，当我在输入框中写入"miki“时，它会在屏幕上显示"miki”，但是，当我单击输入框时，它会发生，当我按下按钮时，这是我的代码，直到现在：
import react, { useState } from "react";
export const ShoppingListPageContainer = () => {
const [name, setName] = useState(``)
const nam
浏览 3提问于2022-05-30得票数 0
在这篇关于的教程中，作者使用了React路由器v2-3，我想使用新的React路由器v4来实现它。因此，我试图更改这个代码，它使用了react路由器v2：
import React from 'react';
import { IndexLink, Link, browserHistory } from 'react-router';
export class Navigation extends React.Component {
logout(e) {
e.preventDefault();
Meteor.logou
浏览 1提问于2017-03-16得票数 0
回答已采纳
13回答
我将两个值传递给子组件：
要显示删除功能的对象列表。
我使用.map()函数来显示我的对象列表(类似于react教程页面中给出的示例)，但是该组件中的按钮在呈现时触发onClick函数(它不应该在呈现时触发)。我的代码如下所示：
module.exports = React.createClass({
render: function(){
var taskNodes = this.props.todoTasks.map(function(todo){
return (
<div>
浏览 77提问于2015-11-22得票数 281
回答已采纳
我知道这个问题已经在这里解决了，但我似乎找不到一个能帮助我的解决方案。
我的代码如下：
import * as React from "react";
import inject from "react-jss";
import styles from "./index.styles";
import * as JSS from "jss";
type Colors = "Red" | "White";
interface Props {
onClick: () => void;
浏览 0提问于2018-10-24得票数 1
回答已采纳
正如标题中所解释的，我得到了错误预期的onClick侦听器是一个函数，而不是object类型 但是我不能理解为什么这个不起作用。据我所知，onClick侦听器是一个函数。 下面是错误所在的CharacterList组件 import React,{Component} from 'react';
import {connect} from 'react-redux';
import {addCharacterById} from '../actions';
import {bindActionCreators} from 'redux&
浏览 45提问于2017-06-30得票数 27
回答已采纳
令我困惑的是，为什么当我定义react组件类时，包含在this对象中的值在类中未定义(this在生命周期方法中可用)，除非我使用.bind(this)或使用箭头函数定义方法，例如在下面的代码中，this.state将在renderElements函数中未定义，因为我没有用箭头函数定义它，也没有使用.bind(this)。
class MyComponent extends React.Component {
constructor() {
super();
this.state = { elements: 5 }
}
renderEle
浏览 1提问于2016-09-17得票数 30
回答已采纳
据我所知，这并不是让按钮在点击时显示警报的正确方式。
我想不谈这背后的逻辑。我理解单击时需要获得对函数的引用，以便按预期工作。
在下面的示例中，将引用将在单击时调用的箭头函数：
<button onClick={() => alert('hi)}>Click me!</button>
但是，在这种情况下，在幕后发生了什么：
<button onClick={alert('hi)}>Click me!</button>
为什么onClick中的语句要在render上进行计算？
编辑:我正在使用React。
浏览 0提问于2018-01-23得票数 2
回答已采纳
正如我所理解的，当我们调用方法时，this包含对调用此方法的object的引用。但是，在以下情况下，什么是“对象”和“方法”：
考虑一下html代码片段
<div id="parent">
<input type="submit" id="submit" value="submit" onclick="doThis(this)"/>
</div>
其中doThis()是JS函数，所以
doThis(obj){
obj.style.background="#
浏览 4提问于2013-12-15得票数 0
回答已采纳
使用ES5开发和ReactJS，组件可以声明如下：
var MyComponent = React.createClass({
alertSomething: function(event) {
alert(event.target);
},
render: function() {
return (
<button onClick={this.alertSomething}>Click Me!</button>
);
}
});
ReactDOM.render(<MyComponent />);
在本
浏览 0提问于2016-07-27得票数 9
回答已采纳
下面是我正在尝试解决的问题的简化版本。
有人知道为什么我的handleKeydown方法没有接收到更新后的activeTab状态变量吗？我认为，因为我添加了activeTab作为依赖项，所以回调将始终接收更新后的值。然而，情况似乎并非如此。
不出所料，每次按下一个键时都会调用回调；但是，activeTab始终为null，即初始值。如有任何帮助，我们不胜感激！
(我同时包含了一个代码片段和一个jsfiddle链接(因为出于某种原因，代码片段似乎无法呈现。jsfiddle至少会呈现出哈哈)。)
const Tabs = () => {
const [activeTab, setAc
浏览 19提问于2021-03-16得票数 1
3回答
我是react的初学者，我编写了下面的代码：
class Note extends React.Component {
constructor(props) {
super(props);
this.state = {editing: false};
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
}
edit() {
// alert('edit');
this.setState
浏览 2提问于2017-11-09得票数 1
回答已采纳
我目前正在学习一个在线课程的反应钩。
指导员将一个匿名回调函数传递给onClick处理程序。
return (
<div className="counter">
<button className="counter-action decrement" onClick={() => decrementScore()}> - </button>
<span className="counter-score">{score}</span>
浏览 2提问于2022-11-25得票数 0
我是React的新手，我正在尝试学习React函数组件状态。我想知道为什么我们需要做onClick={() => setCount(count + 1)}而不是onClick={setCount(count + 1)}
import React, {useState} from 'react';
function Counter() {
const [count , setCount] = useState(0);
return (
<div>
<button onClick={setCount(
浏览 0提问于2019-12-23得票数 2
3回答
我正在尝试让一个按钮来使用knockout.js创建文本，我不确定是html还是javascript出了问题，但是控制台告诉我'start‘id的onclick为空。
<div style="margin:0 20px 0 20px;" >
<p data-bind="text: currentQuestion"></p>
<form id="discoutQuestions" action="none">
<bu
浏览 3提问于2013-06-29得票数 0
回答已采纳
2回答
如果您查看React教程，您会发现当Square从中更改时，作者将移除该属性周围的箭头函数包装器：
备注
当我们将平方修改为函数组件时，我们还将onClick={() => this.props.onClick()}更改为较短的onClick={props.onClick} (注意两边都没有括号)。
箭头函数包装是必要的吗？似乎不需要闭包来捕获this。
编辑：
答案是，组件不需要包装，就像它的函数版本所做的那样，但这两个答案都给出了包装函数调用的充分理由。我接受了这个，因为它是第一个到达的。
浏览 8提问于2020-09-11得票数 1
回答已采纳
如何在函数onClick div.id中获取showChildren事件的目标
预期结果：
div.id
实际结果：
<react></react>
相关Razor
iterateNavigationObject: function(item) {
var titleStyle = {
'backgroundColor': 'grey'
};
return (
<div>
<ul>
<li style={titleSt
浏览 0提问于2016-03-07得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
