React onClick函数在渲染时触发-Java 学习之路

111

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

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

我使用.map（）函数来显示我的对象列表（如反应教程页面中给出的示例），但该组件中的按钮在渲染时触发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函数会在渲染上触发，以及如何使它不被渲染 .

4 回答

24
防止仅在单击按钮时调用函数
```
<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>
```
无需额外的花括号
回复于 2024-05-03T02:35:23+08:00
310
onClick 属性的值应该是函数，而不是函数调用 .
```
<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>
```
回复于 2024-05-03T02:35:23+08:00
11
因为您正在调用该函数而不是将函数传递给onClick，所以将该行更改为：
```
<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>
```
=> 称为箭头功能，在ES6中引入，将在React 0.13.3或更高版本上得到支持 .
回复于 2024-05-03T02:35:23+08:00
0
而不是调用函数，将值绑定到函数：
```
this.props.removeTaskFunction.bind(this, todo)
```
MDN编号：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
回复于 2024-05-03T02:35:23+08:00

React onClick函数在渲染时触发

4 回答

相关问题