Question

这不是在组件上触发，但是当我将事件处理程序附加到div时它可以工作。我是否需要在子组件中传递prop类型函数？

const buttonStyle = {
  color: 'red'
};

class Button extends React.Component {
    render() {
        return (
          <a className="social-button twitter">
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

class PanelButtons extends React.Component {
  constructor(props){
    super(props);
    }

  handleClick() {
    console.log('this is:');
  }

    render() {
        return (
          <div>  
          <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
            CLick me
            </div>
            <div className="social-buttons">
                <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/}
            </div>
           </div>
        )
    }
}

ReactDOM.render(<PanelButtons />,  document.querySelector('body'));

Answer 1

您基本上做的是将名为onClick的回调传递给Button组件。您可以通过组件的道具访问它。

class Button extends React.Component {
    render() {
        return (
          <a className="social-button twitter" onClick={this.props.onClick}>
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

点击Button组件的a元素后，系统会触发您传递的回调（并且会调用handleClick）。

Answer 2

onClick上的<button />可以按预期工作。

但这是<Button />您创建的组件，onClick将作为道具发送，您可以通过Button组件的onClick标签上的a调用下面，其handleClick将回调PanelButtons组件上的实际onClick。

const buttonStyle = {
  color: 'red'
};

class Button extends React.Component {

    handleClick = (e) => {
      this.props.onClick(e)
    }

    render() {
        return (
          <a className="social-button twitter" onClick={this.handleClick}>
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

class PanelButtons extends React.Component {
  constructor(props){
    super(props);
    }

  handleClick() {
    console.log('this is:');
  }

    render() {
        return (
          <div>  
          <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
            CLick me
            </div>
            <div className="social-buttons">
                <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/}
            </div>
           </div>
        )
    }
}

ReactDOM.render(<PanelButtons />,  document.querySelector('body'));

如果您只想在每个按钮的onClick中添加PanelButtons，只需在div标记上添加事件监听器即可稍微修改您的渲染。

render() {
    return (
      <div>  
      <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
        CLick me
        </div>
        <div className="social-buttons" onClick={(e) => this.handleClick(e)}>
            <Button />{/*does now work attaching it to a component*/}
        </div>
       </div>
    )
}

Answer 3

您应该将道具传递给<Button />组件

class Button extends React.Component {
    render() {
        return (
          <a className="social-button twitter" {...this.props}>
            <i href="#" className="fa fa-twitter"></i>
          </a>
        )};
}

更多阅读：JSX spread attributes

Reactjs中组件的事件处理程序

3 个答案: