javascript - Reactjs - 无法将 onClick 应用于渲染的组件

Question

如果我在 React 类组件中有以下代码:

      <svg viewBox="-100 -100 600 500" id='renderName' >
            <Initial value={this.props.value.substring(0,1)} /> 
      </svg>

我似乎只能从容器 svg 中触发 onClick 事件，而不能从我正在渲染的“初始”组件中触发。

例如

      <svg viewBox="-100 -100 600 500" id='renderName' onClick={this._onButtonClick} >

^ 有效

      <Initial value={this.props.value.substring(0,1)} onClick={this._onButtonClick} />

^ 不起作用

知道为什么会这样吗？这与“onClick”作为 Prop 传递而不是调用函数有关吗？

作为更新:Initial 正在另一个组件中呈现。正是在这个组件上，我想用 onClick 调用一个函数。

Answer 1

代码中的

Initial 是一个组件，而不是一个元素，因此您应该将该组件获取的 onClick 属性传递给它呈现的实际元素:

class Initial extends React.Component {

    render() {
        return <rect
                   ...
                   ...
                   onClick={this.props.onClick}
               />
    }
}