这是因为您直接调用函数，而不是将函数传递给onClick

如果你传递了onClick={onClickHandler()}，那么onClickHandler()函数也将在呈现的时候执行，()指示一旦它被呈现就立即执行函数，这不是我们想要的，而是我们使用onClick={onClickHandler}，这将只在指定的事件发生时执行onClickHandler。但如果我们想传递一个参数随函数，那么我们可以使用ES6箭头函数。 针对您的案例:

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

有可能实现这一点，甚至比以下方式更具可读性:

<button onClick={() => somethingHere(param)}/>

const Comp = () => {
  const [triggered, setTriggered] = useState(false);

  const handleClick = (valueToSet) => () => {
    setTriggered(valueToSet);
  };

  return (
    <div>
      <button onClick={handleClick(true)}>Trigger</button>
      <div>{String(triggered)}</div>
    </div>
  );
};

与<button onClick={settrigger (true)}/>相比，它不会触发状态setter，也不会导致太多的重渲染 如果你没有任何参数要传递给函数，这是可以的。

这是因为您直接调用函数，而不是将函数传递给onClick

如果你传递了onClick={onClickHandler()}，那么onClickHandler()函数也将在呈现的时候执行，()指示一旦它被呈现就立即执行函数，这不是我们想要的，而是我们使用onClick={onClickHandler}，这将只在指定的事件发生时执行onClickHandler。但如果我们想传递一个参数随函数，那么我们可以使用ES6箭头函数。 针对您的案例:

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

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

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

在渲染无线电输入中

它为我解决了这个问题。

问题在于如何传递函数

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

<Button onClick={yourFunction()} />

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

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

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

<Button onClick={yourFunction} />

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