React onClick函数在渲染时触发

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

要显示的对象列表删除功能。

我使用.map()函数来显示我的对象列表(就像在react教程页面中给出的例子一样)，但该组件中的按钮在呈现时触发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={function(){removeTaskFunction(todo)}}>Submit</button>

2015-11-21 18:01:16

其他回答

有点晚了，但这是一个简单的答案。

由于JS DOM渲染，直接接近会自行触发

onClick={this.props.removeTaskFunction(todo)}

匿名箭头函数方法。它将在点击时触发

onClick={()=>this.props.removeTaskFunction(todo)}

2021-07-17 12:51:29

你需要使用onClick的箭头函数，以防止立即调用。如果你的按钮是这样的:

<button onClick={yourfunctionname()} />

一定是这样的:

<button onClick={() => yourfunctionname(params)} />

2022-02-28 21:41:52

问题在于如何传递函数

此时你不是传递函数，而是调用它:

<Button onClick={yourFunction()} />

你可以用两种方法解决这个问题:

<Button onClick={() => yourFunction(params)} />

或者如果你没有任何参数:

<Button onClick={yourFunction} />

2021-09-02 13:11:57

JSX将计算花括号中的JavaScript表达式

在这种情况下，this.props. removetaskfunction (todo)被调用，返回值被分配给onClick

你必须为onClick提供一个函数。为此，可以将值包装在匿名函数中。

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

2019-07-22 15:40:51

因为你正在调用这个函数，而不是将函数传递给onClick，将这一行更改为:

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

=>被称为箭头函数，这是在ES6中引入的，React 0.13.3或更高版本将支持。

2015-11-21 18:02:18

React onClick函数在渲染时触发

推荐文章

最新文章

标签