我将两个值传递给子组件:

  1. 要显示的对象列表
  2. 删除功能.

我使用.map()函数来显示我的对象列表(类似于Reaction教程页面中给出的示例),但是该组件中的按钮在渲染时触发onClick函数(它不应该在渲染时触发).我的代码如下所示:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

我的问题是:为什么onClick函数会在渲染时启动,以及如何使其不启动?

推荐答案

因为您调用的是该函数,而不是将函数传递给onclick,所以将该行更改为:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=>调用箭头函数,该函数是在ES6中引入的,将在REACTION 0.13.3或更高版本上受支持.

Javascript相关问答推荐

Vue v模型检测父参考更改

为什么(1 + Number.Min_UTE)等于1?

类型错误:tasks.map不是函数(MERN堆栈)

如何在ReactJS中修复这种不需要的按钮行为?

如何在react + react路由域名中使用DeliverBrowserRouter?

Fastify错误:CORS策略已阻止从起源api-dev.example.com上的MLhttp请求

调用SEARCH函数后,程序不会结束

不渲染具有HTML参数的React元素

使用redux-toolet DelivercThunks刷新访问令牌

RxJS setTimeout操作符等效

React:未调用useState变量在调试器的事件处理程序中不可用

如何分配类型脚本中具有不同/额外参数的函数类型

无法从NextJS组件传递函数作为参数'

虚拟滚动实现使向下滚动可滚动到末尾

无法读取未定义错误的属性路径名''

还原器未正确更新状态

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

Web Crypto API解密失败,RSA-OAEP

自定义确认组件未在vue.js的v菜单内打开

MUI迷你图:如何将$符号添加到MUI迷你图中的工具提示数据