React onClick函数在渲染时触发

我将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函数在渲染时触发，如何使它不触发?

183635 次浏览
小开

与其调用函数，不如将值绑定到函数:

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

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

小开

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

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>
小开
最佳答案

因为你正在调用这个函数，而不是将函数传递给onClick，将这一行更改为:

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

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

小开

对于那些不使用箭头函数，但更简单的…当我在signOut函数后添加括号时，我遇到了这种情况…

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

<a onClick={props.signOut}>Log Out</a>…！ 😆

小开

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

编写for循环并指定函数为 {this.props.removeTaskFunction(todo)}将执行这些函数

.循环被触发时

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

fat arrow函数有一个隐藏的返回语句和绑定 属性> < /强。因此它将函数返回给OnClick ，就像Javascript一样 返回函数太 !!!!!< / p >

使用- - - - - -

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

这意味着,

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

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

它为我解决了这个问题。

小开

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

如果你传递了onClick={onClickHandler()}，函数onClickHandler()也将在呈现时执行，()指示函数在呈现时立即执行，这在这里不需要，相反，我们使用onClick={onClickHandler}，这将只在指定的事件发生时执行onClickHandler。但如果我们想传递一个参数随函数，那么我们可以使用ES6箭头函数。 对于你的Case:

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

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

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

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

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

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

你没有将函数作为参数传递，而是直接调用它，这就是为什么它会在渲染时启动。

如何解决

有两种方法:

第一个

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

或

只需要绑定

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

问题在于如何传递函数

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

<Button onClick={yourFunction()} />

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

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

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

<Button onClick={yourFunction} />
小开

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

<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)}/>相比太多的重渲染 如果你没有任何参数可以传递给函数，这是可以的
小开

你需要使用onClick的箭头函数，以防止立即调用。 如果你的按钮是这样的

<button onClick={yourfunctionname()} />

一定是这样的:

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

提交答案