React:在onClick中调用函数返回未定义
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。
在React中，onClick是一个用于处理点击事件的属性。当用户点击相应的元素时，onClick属性所指定的函数将被调用。然而，如果在onClick中调用的函数返回未定义，可能有以下几个原因：
- 函数未正确定义：请确保函数已经正确定义，并且没有语法错误。可以检查函数的语法和逻辑，确保它能够正常执行。
- 函数未绑定正确的上下文：在React中，函数的上下文（this）默认是undefined。如果在函数中使用了this关键字，需要确保函数被正确绑定到组件的实例上。可以使用bind方法或箭头函数来绑定函数的上下文。
- 函数未正确传递参数：如果在onClick中调用的函数需要接收参数，需要确保参数正确传递。可以使用bind方法或箭头函数来传递参数。
解决这个问题的方法取决于具体的代码和需求。可以检查函数的定义、上下文绑定和参数传递，确保它们都正确无误。如果问题仍然存在，可以进一步检查React组件的其他部分，以确定是否有其他因素导致函数返回未定义。
腾讯云提供了一系列与React相关的产品和服务，例如云服务器、云函数、云存储等，可以帮助开发者在云计算环境中构建和部署React应用。具体产品和服务的介绍可以参考腾讯云官方文档：腾讯云产品与服务。
相关·内容
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
有人能向我解释为什么在SomeClass构造函数中，getLoggerClass方法返回未定义的，但是在onClick()方法中，它返回记录器类？
class App extends React.Component {
constructor(props){
super(props)
this.getLoggerClass = this.getLoggerClass.bind(this)
}
render(){
return(
<div>
<LoggerClass ref={(c)=>{this.logg
浏览 4提问于2017-08-27得票数 2
回答已采纳
我有以下组件，在其中按钮单击，我希望执行一个副本到剪贴板的文本值。
这是很好的工作，并希望为它编写一个测试。但目前在我的测试中，请继续获得以下错误：
错误:未定义的TypeError:无法读取未定义的属性“那么”
也尝试了这里提出的具有同样结果的其他例子。
能帮我了解一下我做错了什么吗？谢谢。
我的组件
import React, { useState } from 'react';
import { Button } from '../../Button';
const A = ({
text,
}) => {
const [copySta
浏览 1提问于2021-10-14得票数 0
回答已采纳
我在学习反应。
我理解如何在类之间使用react共享方法。
但我想知道它是怎么反应的。从下面的代码中，我想知道它是如何调用handleClick方法的，它是如何将this ( Board )绑定到函数的，所以当在Square类中调用它时，它指向Board类，我们可以设置它的状态属性等等。
在下面的代码中，它向Square类发送一个带有箭头函数的onClick属性，其中包含板类方法handleClick(i)。
调用Square类呈现方法时，this.props.onClick被传递给React按钮元素的onClick属性，内部的方法(HandleClick)被调用。
当我handleClic
浏览 1提问于2020-06-04得票数 1
回答已采纳
8回答
我知道，但在我的例子中，这些解决方案都不起作用，而且我仍然
这是未定义的
问题是我在render()方法中有一个函数，我不知道如何处理它。
这是我代码的一部分
class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = {
//states
}
this.changePage = this.changePage.bind(this);
}
changePage (event) {
// some co
浏览 1提问于2019-08-27得票数 2
回答已采纳
import * as React from "react";
import "./App.css";
import PageTwo from "./components/PageTwo";
export interface IPropsk {
data?: Array<Items>;
fetchData?(value: string): void;
}
export interface IState {
isLoaded: boolean;
浏览 1提问于2018-08-23得票数 140
回答已采纳
我在这里有问题，this.greet()是未定义的，我必须绑定onlick事件才能正常工作，有什么想法可以修复它吗？
import React from 'react';
export default class Example1 extends React.Component {
constructor() {
super();
this.message = {
greeting: 'Hello',
name: 'World',
};
浏览 5提问于2022-08-28得票数 0
1回答
今天，我想尝试一些不同的方法来处理一个ReactNode变量，这个变量可以用
所以我把它当作一个对象，它的关键是数字，值是我想要的ReactNode。
一切都很好；
但是，当我单击按钮并触发onCance错误时，出现了错误！像这样
TypeError:无法读取未定义的属性“panelRef”
但是为什么呢？我在构造函数中绑定了它；我不知道。这是我代码的一部分
import React, { PureComponent, ReactElement } from 'react';
import { Modal, Button, Steps } from 'antd'
浏览 3提问于2020-07-10得票数 0
回答已采纳
我们都知道，根据给定的React代码，this将是未定义的。我们有很多解决这个问题的方法，比如绑定，箭头函数等等。我想知道这种行为背后的原因。请解释行为this引用的原因，而不是解决方案。
class Foo extends Component {
clickHandler() {
console.log(this);
}
render() {
return <button onClick = {this.clickHandler}> Click Me </button>;
}
}
浏览 2提问于2019-11-05得票数 0
1回答
我对来自的以下代码(可在上获得)中的导出魔术感到困惑：
import React, { Component } from 'react';
import withFirebaseAuth from 'react-with-firebase-auth'
import firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './firebaseConfig';
import logo from './lo
浏览 0提问于2021-07-16得票数 1
回答已采纳
我在教自己反应，我遇到了一些我很难理解的东西。当我用下面getNavList()中的代码构建我的项目时，当我单击组件中呈现的一个按钮时，我会得到以下错误：“无法读取未定义的‘单击’的属性。”
export class Pane extends React.Component {
constructor(props) {
super(props);
}
getNavList() {
var buttons = [];
if(this.props.subNavButtons != null){
for(var i = 0; i < this
浏览 0提问于2018-11-05得票数 0
回答已采纳
我有一个父组件A，它将有一个子组件B。父组件可以有多个相似的子组件。我希望在父组件中处理这个子组件的数据，因此我将函数作为支持传递给子组件。现在，每当对子组件进行更改时，我都希望重新呈现父组件中的所有组件。父级中有一个名为componentList的状态，它是一个类型为object的数组。每个对象都有关于一个子组件的数据。这给了我语法错误，如果我改变并尝试其他的东西，它会给我componentList的未定义的值。
export class Parent extends React.Component<Props, State> {
constructor(props: Pro
浏览 2提问于2019-11-12得票数 0
回答已采纳
我已经开始学习React，并且有以下组件： import React, { Component } from 'react';
class Test extends Component{
handler(){
console.log(this);
return function(){
console.log(this);
}
}
render(){
{this.handler()()}
return null;
}
}
export defaul
浏览 19提问于2020-06-06得票数 2
回答已采纳
我有两个组成部分。
我将父组件中的showModalDelete方法作为promp发送到我的子元素。
import * as React from 'react';
import Table from './../components/Table';
import Delete from './../components/Delete';
class User extends React.Component<any, any> {
static urlUsers : string = 'http://localhost:
浏览 1提问于2018-04-16得票数 0
回答已采纳
2回答
这是在React JS中的教程之后。
class Square extends React.Component {
render() {
return (
<button
className="square"
onClick={() => this.props.onClick()}
>
{this.props.value}
</button>
);
}
}
funct
浏览 1提问于2019-04-28得票数 0
使用react钩子向变量分配箭头函数的语法是什么？
如果我尝试这样的操作，这个函数就被称为返回分配的函数：
const [func, setFunc] = useState(() => {});
在这里，func将得到“未定义”，因为该箭头函数不会返回任何内容。
我需要这样做，因为我需要从父事件中调用在子元素上实现的函数--所以我可能可以将一个空函数传递给子函数，并在安装子函数时使用setFunc更新func的实现(而且我需要这样做，因为我必须更新父事件上的子元素的状态)。
就像这样：
import React, { useState, useEffect } from "r
浏览 0提问于2020-04-02得票数 1
回答已采纳
我想知道当一个函数在JSX中作为eventHandler的回调调用时，'this‘的值是如何设置的。我注意到，当我直接调用它时，如果没有得到著名的未定义的'this‘错误，访问状态是没有问题的，如下所示：
import React from "react";
class Accordion extends React.Component {
state = { term: "random term" };
onTitleClick() {
console.log("Title is clicked");
浏览 0提问于2020-09-25得票数 2
我有一个名为"AllProducts.jsx“的基于类的React组件，它是我定义的”类AllProducts扩展组件“，所以当我将函数传递给onClick事件处理程序时，我需要绑定" this”的上下文，但是当我试图传递这些函数中的一个参数时，我会在控制台中得到一个错误，它说“无法读取未定义的属性绑定”。
这是代码抛出错误时的样子，请查看i标记的onClick处理程序：
renderProductInfo() {
return this.props.allProducts.map((product) => {
return [
浏览 0提问于2016-05-12得票数 1
回答已采纳
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
回答已采纳
在解释当前发生的流程时，请在下面找到我的代码：
首先，SampleParent调用fetchNames，当调用时，它填充报表数组，并返回包含6个对象的json数组。接下来，当我循环报表数组中的对象时，每次调用'fetchDownloadLink‘函数。该函数一直执行到
fetch(uri, obj)
.then(response => {
if (response.status !== 200) {
throw Error(response.status);
}
return response ;
浏览 1提问于2017-07-05得票数 0
了解关于的知识，其他人能不能在下面这两种场景中使用绑定？如果您可以使用handleClick引用this.handleClick，为什么仍然需要绑定它？处理程序中的this不会已经指向组件了，因为调用处理程序的不是组件吗？此外，为什么将处理程序放置在匿名函数中也有效？
在JSX回调中，您必须小心这一点的含义。在JavaScript中，类方法在默认情况下不受绑定。如果忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，这将是未定义的。
解决办法是：
class Toggle extends React.Component {
constructo
浏览 3提问于2016-11-09得票数 3
1回答
我在那儿。
考虑到这两个组成部分：
const Link: React.FC<{
clicked?: () => {};
Icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
children: string;
}> = ({ Icon, children, clicked }) => {
return (
<div className='sidebarLink' onClick={clicked}>
浏览 6提问于2020-10-05得票数 1
1回答
我已经设置了一个Rails后端(用于一个成分数组)，它以前是工作的，但是现在我的Dispatch函数中的fetch操作正在返回一个undefined状态(而不是检索成分)。API端点运行非常好(通过服务器检查)，但是获取操作没有检索成分，而是返回一个未定义的response.json。
我到处都放了断点，检查一下州。我也试图更改组件的mapStateToProps内容，但是在进入mapState函数之前，状态是undefined。
IngredientList组件
import React from "react";
import PropTypes from "pro
浏览 0提问于2019-09-04得票数 0
回答已采纳
我真的很困惑，因为我正在学习使用钩子，我正在处理useState钩子，当我无意中发现这一点时，当我输入输入时，onClick函数就会被触发。
这是代码：
import React, {useState} from 'react'
function Hooks() {
const [count, setInput] = useState("");
return (
<React.Fragment>
<input value={count} onChange={(e) => {setInput(e.target.
浏览 3提问于2020-07-20得票数 0
回答已采纳
我正在尝试向我的react-table的每一行添加一个编辑按钮，该按钮打开一个模态表单，允许用户保存对该行的不同属性所做的编辑(其中一些属性可能会显示在表中，也可能不会显示)。在Modal中单击"save“后，将向API发出post请求，并使用响应更新react-table中的行。 我试图添加一个调用handleEdit函数的onClick，但传递给handleEdit的所有内容都是未定义的？如何访问行属性(即使是未显示在表中的属性)并用新值覆盖它们？ Header: 'Action',
accessor: 'action',
浏览 19提问于2021-03-20得票数 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
回答已采纳
嗨，我有一个猫图像阵列，我从Giphy api恢复。
我想要做的是单击图像并console.log与图像相关联的url。
下面的代码是我尝试过的。
当我点击搜索按钮console.log显示25个未定义的项目时，所有这些都发生了。
因此，我认为我传递的信息是错误的，并且它正在检测div外部的onCLick
import React from "react";
function handleClick(props) {
console.log(props.gif);
}
const UserItem = props => {
return (
浏览 8提问于2019-08-18得票数 0
回答已采纳
我开始尝试学习反应，遇到了一个我似乎搞不懂的问题。在编写一个简单的评论编辑web应用程序的教程中，当我试图更新评论"TypeError：_this3是未定义的“时，我会遇到这个错误，特别是在以下几行：
this.props.updateCommentText(this.refs.newText.value, this.props.index);
而这个：
updateCommentText={()=>this.updateComment}
以下是完整的javascript代码：
class Comment extends React.Component{
construc
浏览 6提问于2017-06-20得票数 0
回答已采纳
1回答
在我的react应用程序中，我使用useHistory钩子重定向到我的Home组件。为什么useHistory是未定义的，我该如何解决这个问题？ App.js import 'bootstrap/dist/css/bootstrap.css'
import React from "react";
import { Button } from 'react-bootstrap';
import { BrowserRouter, Route, useHistory} from 'react-router-dom';
import
浏览 12提问于2020-12-14得票数 0
1回答
我使用react-router-dom版本6，当我使用onClick={history.push("/movies")时，它不起作用。
电影Form.jsx
import React from "react";
import { useParams } from "react-router-dom";
const MovieForm = ({ history }) => {
const { id } = useParams();
return (
<div className="container"&g
浏览 3提问于2022-08-06得票数 1
回答已采纳
1回答
我正在尝试渲染从父组件传递的特定位置的地图。我使用的是google-maps-react，我不确定两件事：
如何在我的render中使用onClick调用函数。以及如何在我的类中编写呈现我想要的组件的函数。这就是tI到目前为止所做的：
import React, { Component } from 'react';
import yelp from 'yelp-fusion';
import xhr from 'xhr';
import GoogleMapContainer from './Map';
class Busine
浏览 2提问于2017-08-04得票数 10
回答已采纳
我有一个奇怪的东西，我有一个简单的组件
import React, {Component} from 'react';
const Logo = ({onClick}) => {
return (
<a name="home" onClick={onClick} className="logo">
<span className="logo-mini"></span>
</a>
);
};
export default Logo;
浏览 1提问于2016-09-18得票数 1
回答已采纳
1回答
大家好，
我是react的新手，我在尝试运行我的代码时浪费了一天的时间
我在JS中有一个字典：{key，value}。
我想创建一些按钮，其名称与键相同。我想我我想我需要把我的字典(或者一个键数组，因为我不需要associed的值)传递给我的reactDom.render。
我已经创建了这个：
class ButtonList extends React.Component {
onClick(event) {
clictodraw("name");
}
render() {
let items = this.props
浏览 0提问于2017-06-17得票数 1
我正在使用react data-components来呈现一个表。在表中，我呈现一个删除按钮。但是，在render方法中，它不能访问'this‘关键字，因此不能在单击按钮时访问任何处理程序函数。我知道如何在父组件和子组件之间进行通信，但这似乎不属于这一类。代码编译，但在运行时失败。错误是:未定义的TypeError:无法读取未定义的任何帮助的属性'handleClick‘。
这是我的密码：
接口MyComponentProps扩展RouteComponentProps {
appState: AppState;
}
@inject('appState')
类My
浏览 0提问于2018-03-30得票数 1
回答已采纳
运行错误:键"weatherReducer“的片减法器在初始化过程中返回未定义的值。如果传递给还原器的状态未定义，则必须显式返回初始状态。初始状态可能不是未定义的。如果不想为这个还原器设置一个值，可以使用null而不是未定义的。
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
浏览 8提问于2022-05-07得票数 1
回答已采纳
我是新来的反应-质疑。我试图使用它和axios一起发布数据，虽然后端的数据被成功地更新了，react查询仍然以未定义的方式输出数据--这是一个问题，因为我试图从API调用中获得反馈
const {mutate, isLoading} = useMutation(() => {postFunction(rowData)}, {
onSuccess: data => {
console.log(data)
alert(data['message'])
},
onError: data =>
浏览 4提问于2022-09-01得票数 0
2回答
我使用的是react，我不知道为什么没有定义道具。
这是我的课。
import React, { Component } from 'react';
const InputHeight = {
height: '50px',
}
function clearData() {
this.refs.input.value = "";
}
export default class TextInput extends Component {
render() {
return (
浏览 7提问于2017-06-30得票数 10
回答已采纳
令我困惑的是，为什么当我定义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
回答已采纳
我是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
2回答
我想知道在使用React钩子时清除超时/间隔的正确方法和最佳实践是什么。例如，我有以下代码：
import React, { useState, useEffect, useRef } from 'react';
const Test = () => {
const id = useRef(null)
const [count, setCount] = useState(5)
const [timesClicked, setTimesClicked] = useState(0)
if (!count) {
clearInterval(id.cu
浏览 90提问于2019-10-20得票数 4
回答已采纳
2回答
在onClick中可以使用钩子吗？
看着这个
import React, { useState, useEffect } from 'react'
export default function CounterUseState (props) {
const [count, setCount] = useState(props.initialCount || 0)
const add = () => { setCount(count + 1) }
const minus = () => { setCount(count - 1) }
const r
浏览 0提问于2019-08-02得票数 2
回答已采纳
我正试图在netlify上部署react。在本地，我的react应用程序运行良好，本地存储也在持久化数据(本地)。但是，当我在netlify上部署web应用程序时，在访问活动链接之后，它显示了一个错误：“在JSON.parse的位置0处，JSON中的意外令牌u”，因为它正在检索未定义的内容。我尝试过的解决方案:检查错误2:检查控制台中的对象，该对象正确地显示数据。3:我还在App()函数中保留了getTodoFromLocal函数，并保持了const的初始状态，setTodos = useState([])；(用于空数组)，但这不是在页面重新加载时持久化数据。
我的代码App.js
impor
浏览 1提问于2022-06-01得票数 0
回答已采纳
如果我试图在函数中调用TypeError(编辑或保存)，我就会得到"TypeError:无法读取未定义的属性' setState‘“。如果我声明一个箭头函数，它可以工作，但我不明白为什么？
import React, { Component } from 'react';
class Note extends Component {
constructor(props) {
super(props);
this.state = {
editing: false
}
}
浏览 5提问于2017-10-31得票数 1
回答已采纳
我刚从React开始，为我的案例修改了tic tac脚趾教程。我正在尝试单击外孙组件来更改祖父母组件的状态。守则如下：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fields: [
{
id: 1,
show: false
},
{
id: 2,
show: false
}
浏览 0提问于2021-05-07得票数 2
回答已采纳
对于典型的react函数，在事件中调用该函数(例如onClick={})将导致在组件挂载时立即调用该函数。
例如，此代码将在挂载时立即触发，因为正在调用该函数：
const App = () => {
const fn = () => {
alert("hey");
};
return (
<button onClick={fn()}>click</button>
);
};
但是，如果函数使用闭包，它将只在单击按钮时执行。例如：
const App = () => {
const fn = ()
浏览 3提问于2019-11-12得票数 0
回答已采纳
5回答
为什么onClick多次开火
、、、、
我用的是Semantic-ui-react redux和react-router-dom。在我的组件中，我有肚脐：
<Menu >
<Menu.Item as={Link} to="/" onClick = {this.onNavBarItemCLick()}>
home
</Menu.Item>
<Menu.Item as={Link} to="profile" onClick = {this.onNavBarItemCLick()}>
profile
</Men
浏览 0提问于2018-04-04得票数 0
回答已采纳
4回答
seState不工作
、、、
在下面的app组件中，我想根据我定义的函数隐藏一个div，但是它会带来一个错误。
TypeError:无法读取未定义的属性“setState”
拜托，可能出什么问题了？
class Apps extends Component {
constructor(props) {
super(props);
// Don't do this!
this.state = { showing: true };
}
render() {
return (
<div>
浏览 3提问于2018-06-30得票数 1
回答已采纳
我试图使用一个react模式来允许某人更改一个值，并使模态按钮具有动态特性，以便最初有Cancel / Submit按钮，但是在Submit被按下并更改该值之后，这些按钮被替换为Close按钮。
我遇到的问题是，在模态中使用"{modalButtonGroup}“会导致"tmpName”在调用"handleSetNameSubmit“时未定义。如果我注释掉"{modalButtonGroup}“行，只使用硬编码按钮(这些按钮目前在下面的代码中被注释掉)，那么在调用"handleSetNameSubmit”时，将正确设置“handleSetNameSubm
浏览 3提问于2021-10-22得票数 0
回答已采纳
1回答
你好，我试图把函数传递给子类，然后从子类调用它，但是它显示函数的问题是未定义的。
无法读取未定义的属性“removeComment”
这是我的密码
家长班：
import React from 'react';
import Navbar from './notes';
export default class Board extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
浏览 2提问于2017-04-09得票数 3
回答已采纳
我正在学习React，我遇到了事件处理程序。在React中，建议先将函数绑定到this，然后再将其用作事件处理程序。然而，我没有绑定它，我仍然得到了想要的输出。下面是我的代码：
import React, { Component } from 'react';
class Experiment extends Component {
constructor(props){
super(props);
}
clickEvent(e){
e.preventDefault();
docume
浏览 40提问于2018-05-31得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
