React onClick 函数在渲染时触发

Question

我将 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

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

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

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

Answer 2

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

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

Answer 3

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

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

=>调用了Arrow Function，ES6引入，React 0.13.3及以上版本支持。

Answer 4

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

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

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

Answer 5

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

Writing a for-loop and specifying function as {this.props.removeTaskFunction(todo)} will execute the functions whenever the loop is triggered .

To stop this behaviour we need to return the function to onClick.

The fat arrow function has a hidden return statement along with the bind property. Thus it returns the function to OnClick as Javascript can return functions too !!!!!

使用-

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

这意味着-

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

Answer 6

JSX 将评估 JavaScript expressions in curly braces

在这种情况下，调用 this.props.removeTaskFunction(todo) 并将 return 值分配给 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 7

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

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 8

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

如果传了onClick={onClickHandler()}那么函数onClickHandler()也会在渲染的时候执行，()表示函数一到就执行rendered ，这里不需要，而是我们使用 onClick={onClickHandler} ，这将仅在指定事件发生时执行 onClickHandler 。但是如果我们想将参数与函数一起传递下去，那么我们可以使用 ES6 箭头函数。对于您的案例：

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

Answer 9

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

由于JSDOM渲染，直接接近会自行触发

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

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

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

Answer 10

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

如何解决

有两种方法：

第一个

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

或

绑定即可

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

Answer 11

问题在于你如何传递函数

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

<Button onClick={yourFunction()} />

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

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

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

<Button onClick={yourFunction} />

Answer 12

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

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

这样它就不会触发状态 setter 并且与 <button onClick={setTriggered(true)}/> 相比不会导致太多的重新渲染如果你没有任何参数传递给函数，这没关系。

Answer 13

您需要将箭头函数与 onClick 一起使用，以防止立即调用。所以如果你的按钮看起来像这样：

<button onClick={yourfunctionname()} />

一定是这样的:

<button onClick={() => yourfunctionname(params)} />

React onClick 函数在渲染时触发

React onClick function fires on render

javascript

onclick

button

dom-events

reactjs