handleClick函数在父组件上不起作用？
handleClick函数在父组件上不起作用可能是由于以下几个原因：
- 组件间的props传递问题：父组件没有正确地将handleClick函数传递给子组件。在父组件中，确保将handleClick函数作为props传递给子组件，并在子组件中使用props调用该函数。
- 函数作用域问题：确保handleClick函数在父组件中定义，并且在需要调用它的地方可见。如果函数定义在父组件的某个方法中，确保该方法被正确调用。
- 组件绑定问题：如果在父组件中使用了类组件，确保在调用handleClick函数时使用了正确的this绑定。可以使用箭头函数或在构造函数中绑定this来解决这个问题。
- 子组件事件绑定问题：如果handleClick函数是作为子组件的事件处理函数传递的，确保在子组件中正确绑定该函数。可以使用onClick={props.handleClick}来绑定函数。
- 组件更新问题：如果父组件的状态或props发生变化时，子组件没有重新渲染，可能导致handleClick函数不起作用。确保父组件的状态或props的变化能够触发子组件的重新渲染。
如果以上解决方法都没有解决问题，可能需要进一步检查代码逻辑和调试，以确定问题的具体原因。
相关·内容
4回答
我想在UseEffect中调用一个道具函数。以下代码起作用：
useEffect(() => {
props.handleClick(id);
}, [id]);
但林特抱怨props并不是一种依赖。
如果我这样做，那么代码就不再工作了，并且我有最大重呈现错误：
useEffect(() => {
props.handleClick(id);
}, [id, props]);
我怎样才能解决皮棉的问题？
示例代码：
父组件
const ParentGrid = ({rows, columns}) => {
const [sel
浏览 2提问于2020-06-19得票数 16
我有一个父组件，<App>
constructor() {
super();
this.state = {
transporterPos: 0
}
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.timerId = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerId);
}
t
浏览 3提问于2017-02-21得票数 2
回答已采纳
我正在尝试通过将onClick添加到父组件来触发子组件内的onClick函数调用。它不工作。 // parent component
class MainForm extends Component {
// code here
handleClick = () => {
console.log('clicked!');
}
render {
return (
<Linkbutton
text="Click Me!"
onClick={this.handleClick}&g
浏览 22提问于2019-05-21得票数 2
回答已采纳
我正在尝试创建一个简单的仪表板。我只是在探索一些我有反应的新想法，已经很久了，我遇到了一个我似乎无法理解的奇怪的问题。
我有一个非常简单的课程：
export default class Dashboard extends React.Component {
constructor(){
super();
}
HandleClick = (e) => {
if (e.name === "createEvent") {
console.log('event clicked');
}
console.lo
浏览 4提问于2019-10-12得票数 1
回答已采纳
2回答
我不能从子组件重新渲染父组件-我将componentDidMount作为道具传递给子类，然后在那里调用它，并期望父组件重新渲染。render函数被调用，但内容保持不变。怎么了？
var Parent = React.createClass({
getInitialState: function () { return {content: 'clean'}; },
componentDidMount: function () {
this.setState({content: 'changed!'});
},
render: f
浏览 13提问于2016-08-23得票数 0
首先，我必须说，我已经查看了这个站点上所有的“向子组件传递函数”，但没有找到解决问题的方法。我有一个父类：
import React from 'react';
import $ from 'jquery';
import Project from './Project';
import NewProjectModal from './NewProjectModal';
/**
* A projects menu
*/
class ProjectsMenu extends React.Component
{
constr
浏览 7提问于2018-01-01得票数 1
回答已采纳
8回答
我有一个有提交按钮的表单。该表单调用一个函数onclick，该函数将某事的状态从false设置为true。然后，我希望将此状态传递回父状态，以便如果为true，则呈现componentA，但如果为false，则呈现componentB。
我怎么才能做出反应呢？我知道我需要使用状态或道具，但我不知道该如何做。这是否与单向流反应原理相矛盾？？
ComponentA代码：
<form onSubmit={this.handleClick}>
handleClick(event) {
this.setState({ decisionPage: true });
even
浏览 3提问于2016-11-21得票数 75
回答已采纳
在主组件的呈现方法中，我有这一行，
<BettingChips onClick={(betAmount) => this.handleClick(betAmount)} />
它对应于这个函数，
handleClick(betAmount){
alert(betAmount);
}
但是，在子组件中，我似乎不能将参数传递给handleClick函数，
class BettingChips extends Component{
render(){
return(
<div>
<b
浏览 0提问于2018-01-12得票数 1
回答已采纳
2回答
昨天，我问了一个问题，关于如何发送不同的数据集到一个Modal组件，它是基于哪个按钮被点击的。我已经做了一些改变，并遇到了一个新的问题，现在当Modal被任何按钮激活时，屏幕就变成了空白。我觉得这是个简单的解决方案，但我不知道该去哪找。而且，我不相信一旦对象被传递到Modal，我就无法正确地访问它(“title”和"desc")。React门户的index.html div位于正确的位置，我不认为这是一个CSS问题，因为在它工作时我没有对它做任何事情。
现行法典：
ServicesCard
const SERVICES_INFO = {
s1: { title:
浏览 1提问于2021-10-21得票数 0
1回答
我在反应上迈出了第一步。我在做一个gatsbyjs网站，我被困在导航组件上了。
之后，我开始创建一个名为Burger的类组件来显示/隐藏导航.设置道具，状态和绑定。现在没有问题。
在另一个文件中，我使用gatsbyjs "Link“组件来管理链接。
我想要做的是，当我点击链接时，改变“汉堡包”组件的状态。
因此，我尝试使用onClick事件：
onClick={() => props.handleClick()}
它不工作，错误是: props.handleClick不是一个函数。
我做错什么了？
谢谢
// Burger.js
class Burger extends Reac
浏览 6提问于2022-01-11得票数 1
我有两个组件，一个父组件及其子组件。
在父组件中，我存储“active”的状态，该状态包含活动子组件的id。我想要做的是有一个handleClick函数，它将被单击的子组件的id与'active‘的值进行比较，如果它是相同的，或者是不同的，我希望它更新子组件的html className以获得某种样式效果(这可能包括一些动画)。
问题:有没有一种方法可以针对特定子元素的className并对其进行更新？
相反，当将'active‘子组件的id存储在父组件的状态时，在子组件中处理这个函数更好吗？
如果我希望基于子组件的className从一个className到另一个classN
浏览 3提问于2020-12-30得票数 2
回答已采纳
目前我有这样的结构。
Child1 <---- Parent ----> Child2
父组件具有此状态
this.state = {
authenticationChecked: true,
isAuthenticated: true,
sideBarRetracted: false
}
this.retract = this.retract.bind(this);
this.unretract = this.unretract.bind(this);
和以下函数
r
浏览 14提问于2020-02-04得票数 0
回答已采纳
1回答
我是React+Redux的初学者，有这个表的代码。该表的映射如下：
ListTemp.js
//editTemp function invoked in the mapping below
editTemp = (e, temp_id, temp_name, action_url, duration) => {
e.preventDefault();
this.props.getTemp(temp_id)
this.setState({
isEdit: true,
temp_id
浏览 7提问于2022-04-02得票数 0
回答已采纳
我有以下父/子组件：
父级：
handleClick = (e) => {
console.log(e.target)
}
render () {
<div onClick={this.handleClick}>
{this.props.children}
</div>
}
孩子：
render() {
return (
<div>
<div>More content here</div>
<input type="checkbox" name
浏览 0提问于2018-05-18得票数 0
我是React.JS新手，我试图在呈现组件中的元素上创建一个click事件。
这是我的代码：
class InputPanel extends React.Component{
handleClick(i,j) {
this.props.dispatch(actions.someMethod());
// e.preventDefault();
}
render() {
const { dispatch, board } = this.props;
return(
<div>
{
浏览 6提问于2016-09-26得票数 4
回答已采纳
我有两个js文件，一个是app.js，另一个是foo.js。我想访问app.js在foo.js中的状态。
App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {test:" None "};
}
function onChange(event) {
this.setState({
test: event.target.value,
});
}
render() {
retur
浏览 2提问于2019-05-03得票数 0
回答已采纳
1回答
当我试图从子组件修改基组件的变量时。我发现我只能严格地做以下工作：
1:基本组件必须定义了一个事件处理程序，严格地说是一个变量onVariableChange事件处理程序，并将其分配给一个本地函数。
2:基本组件必须具有自定义属性variable，该属性将与上面的onVariableChange函数链接
3:子组件现在可以调用this.props.onVariableChange()进行适当的修改(从子组件到基)
在基本声明中：
changeFn(){ //do Something }
基本渲染：
return <div> <Child variable={this.stat
浏览 1提问于2018-08-18得票数 0
回答已采纳
3回答
我要做的是通过添加用户按下的按钮名称的字符串来更新处于状态的数组。用户有几个按钮，所以在按下它们之后，我应该留下一个与用户按下按钮相关的字符串数组。
首先，我给用户一个警告，告诉他们添加了哪些食物，然后我只是尝试将该食物的名称附加到状态数组中。在此之后，我将该数组传回父组件，以更新那里的类似数组。
我遇到的问题是，当我按下其中一个食物选项时，状态数组不会更新，但我确实得到了正确的警报。当我尝试添加第二个食物时，状态数组将使用我选择的第一个选项进行更新。从那时起，每当我尝试添加一个食物项时，数组状态都会与我在它之前选择的食物更新。
我认为问题在于，我正在以一种反应的方式更新状态，而不是急于求成。
浏览 0提问于2019-03-21得票数 0
回答已采纳
constructor(props){
super(props)
}
handleDelete(number){
console.log(number);
let newQuoteList = this.props.items.filter(function(item){
return item.id != number;
});
console.log(newQuoteList);
this.forceUpdate();
}
render(){
var listItems = (this.props.it
浏览 2提问于2020-06-23得票数 0
在搜索了包括Stackoverflow在内的各种网站之后，我终于想出了如何将状态从一个孩子传递给父母。我必须做两次，因为我的结构是：<NavButtons>子<Nav>父母<App>祖父母
其思想是将单击事件转换为<NavButtons>中的字符串，将该字符串保存为状态，将状态传递给<Nav>，然后再将其传递给将使用该字符串更新视图的<App>。问题是，虽然子状态在单击时立即更新，但父状态只在另一次单击后更新，然后祖父母将只在再次单击后更新。这似乎是非常奇怪的行为，我似乎找不到任何解决办法。我觉得这可能是因为我对生命周期方
浏览 1提问于2019-11-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
