React onClick 函数在渲染时触发

Question

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

1. 要显示的对象列表
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 函数会在渲染时触发以及如何使其不触发？

Answer 1

甚至可以以比以下更易读的方式实现这一点：

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

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

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

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

与<button onClick={setTriggered(true)}/>相比，它不会触发状态设置器并且不会导致太多的重新渲染 如果您没有任何参数可以传递给函数，那也没关系。

Answer 2

问题在于你如何传递你的函数

目前您没有传递函数而是调用它：

<Button onClick={yourFunction()} />

您可以通过两种方式解决此问题：

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

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

<Button onClick={yourFunction} />

Answer 3

您没有将函数作为参数传递，而是直接调用它，这就是它在渲染上启动的原因。

如何解决

有两种方式：

第一

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

或

绑定就行了

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

Answer 4

这里有点晚，但这里是简单的答案。

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

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

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

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

Answer 5

那是因为你是直接调用函数而不是将函数传递给onClick

如果你传递了onClick={onClickHandler()}，那么函数onClickHandler()也会在渲染期间执行，()指示函数一渲染就执行，这里不需要，相反，我们使用 onClick={onClickHandler} ，这将仅在指定事件发生时执行 onClickHandler。但是如果我们想将参数与函数一起传递，那么我们可以使用 ES6 箭头函数。 对于您的情况：

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

Answer 6

我有类似的问题，我的代码是：

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

在RenderRadioInput

它为我解决了这个问题。

Answer 7

JSX 将评估 JavaScript expressions in curly braces

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

Answer 8

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

编写一个for循环并将函数指定为 {this.props.removeTaskFunction(todo)} 将执行函数 每当触发循环时。

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

粗箭头函数有一个隐藏的 return 语句以及 bind 属性。因此，它将函数返回到 OnClick ，因为 Javascript 可以 也有返回函数 !!!!!

使用-

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

这意味着-

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

Answer 9

对于那些不使用箭头函数但更简单的人......我在我的signOut函数后添加括号时遇到了这个......

替换这个<a onClick={props.signOut()}>Log Out</a>

有了这个<a onClick={props.signOut}>Log Out</a> ...！ ?

Answer 10

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

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

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

Answer 11

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

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

Answer 12

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

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

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