我不能在我的 React 组件中传递 onClick 事件?
I cannot pass an onClick event in my react component?
我正在尝试使用此代码中的中继改变我的组件,但我不知道为什么我不能将 onClick 事件放在列表中
handleSubmit = (e) => {
e.preventDefault();
Relay.Store.commitUpdate(
new createTodoMutation({
text: this.refs.textForNewTodo.value,
store: this.props.store
})
);
this.refs.textForNewTodo.value="";
}
handleOnClick = (id) => {
id.preventDefault();
Relay.Store.commitUpdate(
new toggleTodoStatus({
id: id,
store: this.props.store
})
);
}
render() {
let todolist = this.props.store.todoConnection.edges.map((edge) => {
return (
<li key={edge.node.id} onClick={this.handleOnClick(edge.node.id)}>
<p>{edge.node.text}</p>
</li>
);
});
return (
<div>
<h3>Todos</h3>
<form onSubmit={this.handleSubmit} >
<input type="text" placeholder="Todo text" ref="textForNewTodo" />
<button type="submit">Add</button>
</form>
Showing:
<select onChange={this.setLimit} defaultValue={this.props.relay.variables.limit}>
<option value="5">5</option>
<option value="10">10</option>
</select>
<ul>
{todolist}
</ul>
</div>
);
handleSubmit 正在运行,但列表上的 handleOnClick 不起作用,我遇到此错误 "Uncaught TypeError: Cannot read property 'id' of undefined" 但我在 onClick={this.handleOnClick(edge.node.id)}。我看不出这段代码有什么问题。有帮助吗?
这是传递 onClick
事件的错误方式。当您执行 onClick={this.handleOnClick(edge.node.id)}
时,该事件只会在渲染期间调用一次。
尝试onClick={() => this.handleOnClick(edge.node.id)}
。
在你的例子中,你在每次渲染后立即调用 handleOnClick,而不是将其传递给 onClick 以便它可以调用每当您单击该元素时它。
由于您需要将参数传递给您的函数,因此您不能简单地将函数传递给 onClick
<... onClick={this.handleOnClick} />
因此,要解决此问题,您可以创建一个箭头函数并将箭头函数传递给 onClick
<... onClick={() => this.handleOnClick(edge.node.id)} />
你也不需要 id.preventDefault();再
我正在尝试使用此代码中的中继改变我的组件,但我不知道为什么我不能将 onClick 事件放在列表中
handleSubmit = (e) => {
e.preventDefault();
Relay.Store.commitUpdate(
new createTodoMutation({
text: this.refs.textForNewTodo.value,
store: this.props.store
})
);
this.refs.textForNewTodo.value="";
}
handleOnClick = (id) => {
id.preventDefault();
Relay.Store.commitUpdate(
new toggleTodoStatus({
id: id,
store: this.props.store
})
);
}
render() {
let todolist = this.props.store.todoConnection.edges.map((edge) => {
return (
<li key={edge.node.id} onClick={this.handleOnClick(edge.node.id)}>
<p>{edge.node.text}</p>
</li>
);
});
return (
<div>
<h3>Todos</h3>
<form onSubmit={this.handleSubmit} >
<input type="text" placeholder="Todo text" ref="textForNewTodo" />
<button type="submit">Add</button>
</form>
Showing:
<select onChange={this.setLimit} defaultValue={this.props.relay.variables.limit}>
<option value="5">5</option>
<option value="10">10</option>
</select>
<ul>
{todolist}
</ul>
</div>
);
handleSubmit 正在运行,但列表上的 handleOnClick 不起作用,我遇到此错误 "Uncaught TypeError: Cannot read property 'id' of undefined" 但我在 onClick={this.handleOnClick(edge.node.id)}。我看不出这段代码有什么问题。有帮助吗?
这是传递 onClick
事件的错误方式。当您执行 onClick={this.handleOnClick(edge.node.id)}
时,该事件只会在渲染期间调用一次。
尝试onClick={() => this.handleOnClick(edge.node.id)}
。
在你的例子中,你在每次渲染后立即调用 handleOnClick,而不是将其传递给 onClick 以便它可以调用每当您单击该元素时它。
由于您需要将参数传递给您的函数,因此您不能简单地将函数传递给 onClick
<... onClick={this.handleOnClick} />
因此,要解决此问题,您可以创建一个箭头函数并将箭头函数传递给 onClick
<... onClick={() => this.handleOnClick(edge.node.id)} />
你也不需要 id.preventDefault();再