反应 onClick 组件执行 function

Question

我将反应组件动态呈现为：

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

Char 组件的 render 方法是：

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

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

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

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

因此向 Char 元素添加了一个反应事件侦听器。 并从 Char 组件中的 div 中移除了 onClick 监听器。

...而且它不起作用。

为什么？ 我不只是将 onClick 监听器上移一级吗？

Answer 1

您必须注意，将任何 function 传递给 React 组件只是作为道具传递而不被视为事件侦听器。 为了使 onClick 工作，需要将其传递给 DOM

现在，您可以像 do 一样将其显式传递给Char组件中的 div

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

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