JSX与ReactJS一起使用，因为它与HTML非常相似，它给程序员使用HTML的感觉，而它最终转换为javascript文件。

编写for循环并指定函数为 {this.props.removeTaskFunction(todo)}将执行这些函数 每当循环被触发时。 为了阻止这种行为，我们需要将函数返回给onClick。 胖箭头函数与bind一起有一个隐藏的return语句 财产。因此，它像Javascript一样将函数返回给OnClick 也返回函数!!!!!

使用- - - - - -

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

这意味着,

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

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

你没有将函数作为参数传递，而是直接调用它，这就是为什么它会在渲染时启动。

如何解决

有两种方法:

第一个

<Button onClick={() => { 
this.props.removeTaskFunction(todo);
}
}>click</Button>

OR

只需要绑定

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

与其调用函数，不如将值绑定到函数:

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

MDN参考:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

我也有类似的问题，我的代码是:

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

    }

它应该在哪里

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

在渲染无线电输入中

它为我解决了这个问题。

onClick属性的值应该是一个函数，而不是函数调用。

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