Javascript 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>
        );
    }
});

module.exports=React.createClass({
render:function（）{
var taskNodes=this.props.todoTasks.map（函数（todo）{
返回(
{todo.task}
提交
);
}，这个）；
返回(
{taskNodes}
);
}
});

---

我的问题是：

onClick

函数为什么会在渲染时触发，以及如何使其不触发？

将值绑定到函数，而不是调用函数：

this.props.removeTaskFunction.bind(this, todo)

---

MDN ref:

单击属性的值应该是函数，而不是函数调用

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

提交

因为您正在调用该函数而不是将该函数传递给onClick，所以将该行更改为：

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

{this.props.removeTaskFunction（todo）}>Submit

---

=>

称为箭头函数，该函数在ES6中引入，将在React 0.13.3或更高版本上得到支持

对于那些不使用箭头函数但更简单的函数。。。在我的注销函数后添加括号时遇到此问题

替换此

注销

使用此
注销
 JSX与ReactJS一起使用，因为它与HTML非常相似，它给程序员使用HTML的感觉，而它最终会传输到javascript文件

编写for循环并将函数指定为
{this.props.removeTaskFunction（todo）}将执行这些函数
每当循环被触发时

要停止这种行为，我们需要将函数返回到onClick

fat arrow函数有一个隐藏的return语句和绑定
属性。因此，它会像Javascript一样将函数返回OnClick
返回功能太多

使用-

也就是说-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);

JSX将评估

在这种情况下，将调用
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>
        );
    }
});

export const samepleComponent=（{todoTasks，removeTaskFunction}）=>{
const taskNodes=todoTasks.map（todo=>(
{todo.task}
removeTaskFunction（todo）}>Submit
);
返回(
{taskNodes}
);
}
});
我也有类似的问题，我的代码是：

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

在RenderRadioInput中

它为我解决了这个问题。
这是因为您直接调用函数，而不是将函数传递给
onClick

如果您已经传递了
onClick={onClickHandler（）}
，那么函数
onClickHandler（）
也将在渲染期间执行，
（）
指示在渲染后立即执行函数，这在这里是不需要的，我们使用
onClick={onClickHandler}
，这将仅在指定事件发生时执行onClickHandler。但是，如果我们想将参数与函数一起传递，那么我们可以使用ES6 arrow函数。
对于您的情况：

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

this.props.removeTaskFunction（todo）}>Submit
如何在coffescript中执行此操作？您也可以避免使用这些箭头函数大括号。我相信这与最佳实践相匹配：
onClick={（）=>this.props.removeTaskFn（todo）}
请您再解释一下好吗？我知道人们一直在说这不是最佳实践，但我想知道这里到底发生了什么（）=>我知道什么是箭头函数，但不知道它是什么（）以及为什么它不好？@wuno（）是匿名函数的参数。这里是空的，因为我们没有传递任何参数。假设（）是函数（）的（）。关于为什么在render（）函数中绑定不是最佳实践，是因为在每次渲染时，我们都要将函数重新绑定到组件，这可能非常昂贵。@LongNguyen这就是我要找的！谢谢你和其他很多人。与类或绑定相比，您应该更喜欢无状态函数，因为它们可能会导致不希望的副作用。因此，即使两个答案都正确，我相信其中一个比另一个更合适。不建议在渲染或组件中的任何其他位置直接绑定。绑定应该总是在构造函数中发生不要在render内部的事件调用上使用匿名函数-它将触发另一个根本不适用于我的渲染。我传递了函数，但从未添加括号，它仍然在render上启动。不确定自2月19日以来这是否发生了变化，但在Long Nguyen和Vishal Bisht的答案中指定了一个函数修复了这个问题。
onClick = {() => this.props.onClick()}

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