React onClick 组件执行函数

Question

我动态地将反应组件渲染为：

{map.call(this.state.text, (c, i) => (<Char
click={() => this.deleteCharHandler(i)}
charVal={c}
key={i}/>))}

其中 Char 组件的呈现方法是：

render() {
return(
<div className="char" onClick={this.props.click}>
{this.props.charVal}
</div>
)

这有效，并且使用正确的值 i 适当地调用 deleteCharHandler。

但是，我想避免将处理程序函数作为道具传递。毕竟，div 的 onClick 只是执行 click 属性，这是一个调用 deleteCharHandler 的匿名函数。我试图重构为：

{map.call(this.state.text, (c, i) => (<Char
onClick={() => this.deleteCharHandler(i)}
charVal={c}
key={i}/>))}

从而将反应事件侦听器添加到 Char 元素。并从 Char 组件中的div 中删除了 onClick 侦听器。

。而且它不起作用。

为什么？我不是只是将onClick侦听器向上移动一个级别吗？

Answer 1

你必须注意，将任何函数传递给 React 组件只是作为 prop 传递下来，而不是被视为事件侦听器。为了使onClick工作，它需要传递给DOM

现在，您可以像 do 一样将其显式传递给组件Chardiv

render() {
return(
<div className="char" onClick={this.props.click}>
{this.props.charVal}
</div>
)

或者，您可以解构其他值并使用 REST 扩展语法传递 REST 值。无论哪种方式，您都需要将处理程序传递给 DOM 元素

render() {
const {charVal, ...rest} = this.props; 
return(
<div className="char" {...rest}>
{charVal}
</div>
)

上述方法使您可以灵活地将所需的 prop 传递给div 元素，而无需明确提及它们。但是，您必须小心不要将非必需的值传递给div元素