React component - onClick但什么也没发生，为什么？
这个问题可能有多种可能的原因，以下是一些可能导致点击事件没有触发的常见原因：
- 事件处理函数未正确绑定：确保onClick事件处理函数已正确绑定到React组件的相应元素上。可以通过在组件的render方法中使用箭头函数或bind方法来绑定事件处理函数。
- 元素没有正确渲染：检查React组件是否正确渲染了包含onClick事件的元素。确保元素已经正确地添加到组件的渲染结果中，并且具有正确的属性和事件处理函数。
- 事件处理函数中的错误：检查onClick事件处理函数中是否存在错误。确保函数内部的逻辑正确，没有语法错误或逻辑错误。
- 其他事件或组件阻止了点击事件的触发：可能存在其他事件或组件阻止了点击事件的触发。例如，可能存在一个覆盖在点击元素上方的透明层，阻止了点击事件的传递。
- 组件状态或属性的问题：检查组件的状态或属性是否正确设置。如果onClick事件处理函数依赖于组件的状态或属性，确保它们被正确设置和更新。
- React版本或依赖问题：检查React版本和相关依赖是否正确安装和配置。确保使用的React版本与代码兼容，并且相关依赖已正确安装。
如果以上解决方法都无效，可以进一步调试代码，使用开发者工具查看是否有错误信息或警告，并检查浏览器控制台是否有相关错误。另外，可以尝试在onClick事件处理函数中添加一些调试语句，以确定是否执行了事件处理函数。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（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
相关·内容
我有两个组件--子组件和父组件。我想从子组件中更改父组件的标题。但没有钩子。
所以我有这个：
class App extends Component {
render() {
return (
<div className="app">
<ParentComponent/>
</div>
);
}
}
export default App;
和儿童部分：
import React from 'react'
function ChildCompo
浏览 5提问于2021-12-09得票数 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
回答已采纳
下面的示例代码使用了react路由器和上下文挂钩，在这里，我试图理解为什么当我使用锚而不是链接组件时，它的行为会有所不同。链接组件被注释掉。
这个应用程序只是显示一个带有html链接的屏幕，你可以点击它来显示组件2(组件1是最初显示的)。我正在更新锚点的onClick事件中的上下文值(我使用setName函数更新上下文中的名称)。
当我使用锚标记时，它不会保留被更新的上下文值。因此，当它转到component2时，上下文中的名称值将显示为person1。但是，如果我注释掉锚并使用Link组件，则上下文值将被正确更新。
为什么链接组件在更新上下文时按预期工作，而不是锚点？
import Reac
浏览 3提问于2020-12-22得票数 1
回答已采纳
1回答
我是Redux的新人。现在我试着使用redux反应路由器，但我有问题了。我点击链接，什么也没发生。我的应用程序不呈现组件，也不更改URL。
我有以下代码的app.js文件：
import '../stylesheets/main.scss';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { combineReducers, createStore } fr
浏览 2提问于2016-02-22得票数 5
回答已采纳
开门见山，在基于react类的组件中，prop对象从何而来？
我正在遵循官方的React tic-tac-toe游戏教程。
首先，当我查看react Component类(我们在创建React组件时对其进行扩展)的代码时，我观察到该函数有3个参数Component(props, context, updater)，但我不明白为什么在调用props ()的情况下只像super(props)这样传递props。不是也应该为context和updater传递值吗？为什么代码在不调用super的情况下运行时没有错误？
import React, { Component } from "reac
浏览 0提问于2019-06-23得票数 2
我在学反应。我已经用rails实现了一个示例react应用程序。我找了很多东西才能找到解决办法，但我什么也没找到。我想从onClick函数中调用另一个组件。但什么都没发生。这有可能是我想要实现的吗？如果是，那么请指出我做错了什么，如果没有，那么我可以实现哪种方式。这是我的代码：
var Comment = React.createClass({
render: function () {
return (
<div id={"comment_"+ this.props.id }>
<h4>{ this.props.
浏览 1提问于2015-04-28得票数 6
我有一段代码
import React, {Component} from 'react';
class App extends Component {
render() {
return (
<Container>
<Child/>
</Container>
)
}
}
class Container extends Component {
render() {
console.log('Container render');
retur
浏览 3提问于2017-11-30得票数 10
回答已采纳
我有一个带有网格的页面，用于显示产品。在我转到产品详细信息页面后，顶部栏上的图标不再加载。为什么会发生这种情况？
这是我的布局组件：
export default class Layout extends React.Component {
render(){
return <div>
<LoadingScreen/>
<AppBar/>
<MyRouter/>
<Footer/>
</
浏览 4提问于2019-11-12得票数 0
回答已采纳
1回答
反应-打字稿你好世界
、、、
我试着用打字稿来回应世界。下面是我写的代码。当我使用方法1时，此代码工作，但在方法2上抛出错误。
Method 1 - TypeScriptComponent.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'
interface TypeScriptComponentProps {
}
function handleClick() {
console.log("
浏览 3提问于2017-04-04得票数 5
回答已采纳
2回答
我在的基础上写了一个试剂鼻
App.js
import React, { Component } from "react";
import {withToggle} from './withToggle'
export default class App extends Component {
render() {
const ButtonWithToggle = withToggle(<button onClick={()=>{}}>butt</button>);
return (
<div
浏览 1提问于2018-07-26得票数 1
2回答
由于我是一个新的反应，我有问题，如何删除组件时，点击按钮旁边的组件。在下面的代码中，我通过props将'click‘传递给Currency组件，并将其分配给'onClick’事件处理程序。我希望它应该删除组件时，点击按钮。然而，我觉得我做错了什么--什么都没发生。有人能帮帮我吗？
import React, { Component } from "react";
import NumberFormat from "react-number-format";
import Currency from "./Curre
浏览 0提问于2020-08-06得票数 0
当react组件有事件处理程序时，我无法通过使用.contain的测试。示例：
Foo.js
const Foo = React.createClass({
render () {
return (
<p onClick={() => {}}>I am not a very smart component...</p>
)
}
})
export default Foo
Foo.test.js
import React from 'react'
import
浏览 0提问于2017-09-10得票数 1
回答已采纳
我尝试在我的应用程序中使用react-native-drawer ()和react-native-router-flux
根据的说法，我把抽屉里的场景添加到路由器中：
import NavigationDrawer from './scenes/NavigationDrawer';
import MetricsScene from './scenes/MetricsScene';
...
<Router>
<Scene key="root">
<Scene key="login&
浏览 2提问于2017-05-23得票数 1
我已经在reactJs中创建了come组件，由两个按钮组成，它们处理每个onClick函数，但当我运行代码"myfunction is not defined“时，出现错误。我想在按钮触发时将页面重定向到指定的地址。我的代码出了什么问题？ import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class MainMenu extends React.Component {
constructor(props){
super(pr
浏览 27提问于2019-05-11得票数 1
回答已采纳
我已经简化了代码，以隔离和重现问题，因此它在实际实现中可能没有意义：
import React, { Component } from 'react'
const obj = {
objProp: true
};
export default class MyButtonContainer extends Component {
render() {
return (
<MyButton
onClick={() => {obj.objProp = !obj.objProp;}
浏览 16提问于2018-12-11得票数 2
1回答
我正在读这篇与React相关的article。我还研究了关于闭包和回调、here、here和here的讨论。 在React相关文章中给出的一个示例中，有三个组件<App>, <Form>, <Button>。<App>在初始化期间和componentDidMount生命周期期间将状态值传递给<Form>组件。<Form>将一个回调函数连同从<App>接收到的状态值一起传递给<Button>组件。 class App extends React.Component {
state = { val
浏览 24提问于2021-05-10得票数 1
回答已采纳
1回答
由于某些原因，my the boolean仅返回被忽略的组件的URL。但我不知道为什么有人能帮上忙？
我想返回循环中的组件。但是什么都没发生？
import React, { Component } from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
import 'bootstrap-4-grid/scss/grid.scss';
class Slider e
浏览 0提问于2018-09-29得票数 0
这个问题可能在于我不太理解的React语法。
我有一个数组，我用*array.maps((item) => *制作按钮，我创建的按钮和数组中的元素一样多。但是我不能用这些按钮触发/调用任何函数。我按下那些按钮，但什么也没发生。知道为什么吗？
在家长班：
class ParentClass extends Component{
constructor(props){
super(props);
this.state = {
someObjectXX: {
someArrayZZ: ['first&#
浏览 0提问于2018-08-01得票数 1
3回答
在运行run函数时，我预计值变量的值为“new”，但即使是500 ms，它仍然是“旧的”。为什么会发生这种情况，以及如何解决这个问题？
import React, { Component, useState } from "react";
import { render } from "react-dom";
function App() {
const [value, setValue] = useState('old');
const run = async() => {
setValue('new'
浏览 3提问于2019-12-20得票数 4
2回答
我正在学习react，我做了一个组件，在里面我有一个on click函数，我在里面有一个控制台语句，有人能解释为什么它在呈现上显示两次吗？
import React from 'react';
class App extends React.Component {
render() {
return (
<>
<button onClick={console.log("hello")}>Change name</button>
<h
浏览 1提问于2020-09-29得票数 1
回答已采纳
有人能向我解释为什么在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
回答已采纳
1回答
我基本上是试图显示一个按钮的数字(初始值1)，当你点击那个按钮，数字增加一个。我有两个组件，一个主应用程序组件和一个按钮组件。向Button组件传递一个更新数字的函数。但是当我加载所有这些时，它会给我一个错误：
TypeError: this.state is null
render
src/Button.js:6
export class Button extends React.Component {
render() {
return (
> <button onClick={this.props.onClick}>
{this.state.count
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
为什么在ReactJS中使用‘()this.handleClick’，即使它在这里工作也像'this.handleClick‘一样？
import React, { Component } from 'react';
class App extends React.Component {
handleClick = () => {
console.log("Hi there, user!");
};
render() {
return (
<div onClick={this.handleClick}>
<a
浏览 0提问于2021-01-31得票数 0
回答已采纳
我正在计算用户在我的自定义按钮中点击了多少次。该按钮基于<a href="/some_route"> Click me! </a>。整个守则是：
class CustomButton extends React.Component {
render() {
return (
<a href={this.props.href} className="custom-button" onClick={this.props.onClick}>
{this.props.text}
浏览 3提问于2021-01-15得票数 3
回答已采纳
2回答
我有一个带有MobX @observer注释的简单React类和一个简单的数据结构(用@observable data = { .. }注释)。操作更新此结构，但确实呈现。
这是这个类的源代码：-
import React, {Component, Fragment} from 'react';
import {observer} from "mobx-react";
import {observable} from "mobx";
import {withRouter} from 'react-router-dom';
@ob
浏览 12提问于2020-05-28得票数 0
回答已采纳
我有一个包含基本onClick函数的组件。
该函数在组件呈现时被调用(没有任何单击)，为什么会发生这种情况？
import React, { Component } from "react";
class Some extends Component {
constructor(props) {
super(props);
}
someFunc = (message) => {
console.log(message)
}
render() {
return (
<p onClick={this.som
浏览 0提问于2019-07-31得票数 0
回答已采纳
我有以下React组件：
class PlayerRow extends Component {
activateKey(){
$(this).addClass('active')
}
render() {
return (
<div className="row-par">
<div className="details-cont">
</div>
浏览 17提问于2017-02-10得票数 0
回答已采纳
我试图在父组件中呈现一些子组件，但没有呈现任何子组件。我没有收到任何控制台错误，但没有渲染。我不知道为什么会发生这种事。我正在处理的应用程序是用React构建的，使用的是通量体系结构。
这是我的代码：
父组件：
import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import TableWithDataBody from './TableWithDataBody.jsx';
import TableWithDataRowFo
浏览 2提问于2016-03-07得票数 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
1回答
我有个问题。请告诉我..。
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log("clicking")
};
render() {
return (
<div>
<ul>
{this.state.lett
浏览 2提问于2020-10-08得票数 1
3回答
我有一个类组件，它有一个引用内部input的input事件处理程序。但是，在事件处理程序中，input为空。我在构造函数中将事件处理程序绑定到this。
import React, { Component} from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(e) {
// The following throws &#
浏览 1提问于2017-08-21得票数 0
回答已采纳
例如：
我在react中添加了事件处理程序：
<div onClick={someHandler}/>
然后我派人去：
let clickEvt = new MouseEvent('click', {
'bubbles': false,
'cancelable': true
});
elm.dispatchEvent(clickEvt);
但什么都没发生。我听说您可以使用elm.click()来触发react事件。我想知道这是否是正确的反应方式？另外，click()和dispatchEvent()有什么区别？因为我有
浏览 1提问于2017-03-29得票数 2
回答已采纳
为什么点击播放可以播放声音，点击播放却没有声音？？
import React, { Component } from "react";
import { Howl, Howler } from 'howler';
class App extends Component {
SoundPlay() {
const Sounds = new Howl({
src: ["sound.mp3"]
})
Sounds.play()
console.log("sound")
}
ren
浏览 0提问于2019-02-26得票数 6
3回答
简单反应计数器
、、、、
我刚开始学习React，并选择使用Visual的.NET + React模板，该模板在.tsx文件中给了我这段代码，演示了如何制作一个简单的按钮来增加计数器：
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
interface CounterState
{
currentCount: number;
}
export class Home extends React.Component<RouteComponentProps&
浏览 2提问于2018-02-14得票数 3
回答已采纳
1回答
我想知道为什么单击表行仍然会给出未定义的调度错误，从而导致Uncaught TypeError: dispatch is not a function。我一直在遵循这个来尝试解决这个问题，但到目前为止还没有成功。
ListingTable.js
import Table from 'grommet/components/Table';
import React from 'react';
import {remove, add} from '../action/ListAction';
import {connect} from 'rea
浏览 2提问于2016-07-15得票数 3
回答已采纳
3回答
单击按钮后，我希望呈现我的数据。我在组件中使用条件呈现，并在state对象中创建一个布尔变量。按钮单击变量更改后(如我所料)，我的数据被呈现。但什么都没发生。我知道这是一个基本的错误。
class SortingMyArray extends React.Component {
constructor(props) {
super(props)
this.state = {
addcomments: addcomments,
isClicked : false
}
// t
浏览 3提问于2020-03-22得票数 1
回答已采纳
嗨，我不明白为什么我的onclick功能不能工作。我的函数创建，在加载页面时运行2次，但单击按钮时不运行。
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Topics } from '../api/topic.js';
import Topic from './Topic.jsx';
class AppCreate exte
浏览 1提问于2017-07-07得票数 1
回答已采纳
当单击页面上的按钮时，我试图更新状态变量。但是我发现我不能使用react类组件方法。这里是最小可重现性的例子。
import React, { Component } from 'react'
export class Name extends Component {
constructor(){
super();
this.state = {
name : "Farhan Ahmed"
}
}
clickMe() {
this.setState({
浏览 3提问于2021-10-23得票数 0
回答已采纳
1回答
React-路由器链路不工作
、、、、
在我的组件中使用Link to时，它在浏览器中呈现得很好，但当我尝试单击链接时，它不起作用。什么都没发生。
在检查器中可以看到一切正常，链接转到正确的位置，但就是不起作用。
你知道我会做错什么吗？
代码如下：
import React, { Component } from 'react';
import { Link } from 'react-router';
import classNames from 'classnames';
class myClass extends Component {
render () {
retur
浏览 1提问于2017-11-10得票数 0
2回答
以下是错误消息：
SyntaxError: <local path>/Icon.jsx: Unexpected token (13:2)
11 |
12 | return (
> 13 | <{props.component} onclick=props.onClick styleName=props.classNames style=props.style/>
| ^
14 | );
15 | };
我似乎不知道如何修复无状态函数返回中的语法错误，下面是代码：
import React from 'r
浏览 4提问于2016-10-03得票数 0
回答已采纳
下面的代码示例包含两个组件：Component1 logs prevState带有componentDidUpdate方法，Component2在单击按钮时被移除，以显示componentWillUnmount的使用。 const { useState } = React;
class Component1 extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'John',
};
}
componentDidUp
浏览 28提问于2020-11-19得票数 2
回答已采纳
首先，我已经阅读了我能找到的几乎每个示例，并查看了各种样板文件，看看其他人是如何做到这一点的。我在用react-<Link> v4点击react-router时遇到了加载页面的问题。我也安装了react-router-connected软件包，并一直在尝试，但没有看到任何改进(但是它显示了redux-logger中的变化，这很好)。
目前，url更新正常，如果我手动更改url并按回车键，则会加载下一个页面。但是，如果我点击一个链接，它不会重定向。我也在为这个项目使用create-react应用程序，仅供您参考。我的实际应用被设置为官方redux文档中来自usage with rea
浏览 0提问于2017-12-08得票数 1
1回答
当我单击Button时，我试图理解为什么Header组件没有更新。我相信问题是我没有和路由器联系。但是为什么当我切换路由时，App.js不重新呈现呢？
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import First from './First';
import Second from './Second';
import Third fr
浏览 3提问于2021-10-08得票数 2
回答已采纳
1回答
反应动态标签名
、、
假设以下以及所有组件/fus/fci/ssg只有一个带有站点支持的h1。我想了解为什么它是一个有效的反应元素，但这些元素并没有显示相同的呈现。也就是说，其中一个有h1元素，另一个没有，其想法是不要为不同的站点创建带有切换的大型组件，每个站点都将根据导航选择被替换掉。我没有看到任何关于这件事的文件除非我错过了..。
{this.state.renderSite}
<Fci site="Fci"/>
import React from 'react';
浏览 2提问于2016-04-12得票数 2
回答已采纳
我已经试着解决这个问题好几天了，但还是不能正常工作。为什么重定向在这里不起作用？我一直收到"TypeError:历史是未定义的“。同样，当按钮被点击时，它会停留在相同的url上。我做错了什么？ import React from 'react';
import Nav from './Nav';
import About from './About';
import Service from './Service';
import Home from './Home';
import {
Brow
浏览 30提问于2021-02-11得票数 0
回答已采纳
3回答
未呈现Container组件。有人能告诉我为什么我不能呈现Container组件吗？
App.js
import React, { Component } from "react";
import "./App.css";
import Container from "./Container";
class App extends Component {
add() {
return <Container />;
}
render() {
return (
<div className=
浏览 3提问于2018-07-03得票数 4
在方法handleIncrement()中，当我将"this“记录到控制台时，它会显示未定义的内容。
然而，getBadgeclasses()也是同一个类的方法，在这个类中，它引用父类。
为什么会这样呢？这是因为handleIncrement方法是由onClick属性调用的，还是存在其他逻辑？
import React, { Component } from "react";
class Counter extends Component {
state = { count: 2, tags: [] };
handleIncrement() {
co
浏览 0提问于2021-09-02得票数 1
回答已采纳
我正在尝试用react做一个计算器，但我不能在输入字段中使用'eval‘。下面的代码给出了这个错误-
import React, { Component } from "react";
class myApp extends React.Component {
state = {
equation: "",
};
handleClick = (e) => {
this.setState({ equation: e.target.value });
console.log(eval(this.state.equ
浏览 11提问于2021-11-11得票数 0
在下面的代码中，我试图运行一个函数，该函数将在单击一个名为people的按钮时使用component infoButton来更改组件的状态，但问题是本应在单击按钮时运行的onClick函数没有运行，我不能理解为什么？代码的重要部分被标记在星号内部(*)
import React from 'react';
import './App.css';
import Header from './components/header';
import InfoButton from './components/infoButtons';
i
浏览 0提问于2020-03-18得票数 1
1回答
在阅读了关于不变性的文章之后，我试图了解react是如何工作的。我试图理解以下三个组成部分的帮助，但这是没有意义的。
const bla = {a: 1};
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
a: 1,
};
this.onClick = () => this.setState(prevState => ({
a: prevState.a + 1
}));
}
re
浏览 0提问于2019-09-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
