Question

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

要显示的对象列表
删除功能。

我使用.map（）函数来显示我的对象列表（如反应教程页面中给出的示例），但该组件中的按钮会在渲染时触发onClick函数（在渲染时不应触发））。我的代码如下所示：

s-a1-a2-u-v-s

我的问题是：为什么我的onClick函数会在渲染时触发，以及如何使它不能。

Answer 1

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

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

=>名为Arrow Function，在ES6中引入，将在React 0.13.3或更高版本上得到支持。

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

替换此<xsl:template match="content/body"> <xsl:for-each-group select="*" group-adjacent="boolean(self::serial)"> <xsl:choose> <xsl:when test="self::serial"> <xsl:copy-of select="current-group()"/> </xsl:when> <xsl:otherwise> <serial><xsl:copy-of select="current-group()"/></serial> </xsl:otherwise> </xsl:choose> </xsl:for-each-group> </xsl:template>

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

Answer 5

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 6

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 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() 也会在渲染时执行，() 指示函数一渲染就执行，这不是我们想要的，而是我们使用 onClick={onClickHandler} ，这只会在指定的事件发生时执行 onClickHandler 。但是如果我们想和函数一起传递一个参数，那么我们可以使用 ES6 箭头函数。对于您的案例：

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

Answer 9

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

直接方式会因为 JS DOM 渲染而自行触发

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

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

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

React onClick函数在渲染时触发

9 个答案: