React onClick函数在渲染时触发

2020/10/12 15:21 · javascript ·  · 0评论

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

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

我使用.map()函数显示对象列表(如在React教程页面中给出的示例中所示),但是该组件中的按钮在onClickrender上触发该函数(不应在渲染时触发)。我的代码如下所示:

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函数在渲染时触发,如何使其触发?

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

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

=> 在ES6中引入了一个称为Arrow Function的功能,并将在React 0.13.3或更高版本中得到支持。

将值绑定到该函数,而不是调用该函数:

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

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

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

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

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

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

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

与此<a onClick={props.signOut}>Log Out</a>...!😆

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

我有类似的问题,我的代码是:

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中

它为我解决了这个问题。

本文地址:http://javascript.askforanswer.com/react-onclickhanshuzaixuanranshichufa.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!