javascript - 在 ReactJS 中向无状态组件添加事件

Question

有没有任何可能的方法来附加 Event无国籍Component ？让我在下面解释我的问题:

我有一个 bootstrap 的无状态组件按钮为:

export const Button = props => {
  return (
    <button
      className={`btn btn-${props.type} ${props.class}`}
      type={props.buttonType}
    >
      {props.children}
    </button>
  );
};

我正在使用 <Button/> Parent 中的组件名为 Container 的组件作为:

class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  sendData() {
    // method logic
  }

  render() {
    return (
      <Button type="primary" class="">
        Save Changes
      </Button>
    );
  }
}

调用sendData()点击Button的方法我试过的组件:

<Button type="primary" onClick={() => this.sendDate()}>
  Save Changes
</Button>

但这行不通。

是否有任何可能的方法将事件附加到无状态 Component调用Method来自 Parent组件。

我在谷歌上搜索但无法找到该问题的解决方案，如果您有任何解决方案，请帮助我。非常感谢:)

Answer 1

您需要将事件处理程序传递给 Button 组件，并将 onClick 添加到默认的 html button 组件

尝试以下操作:

export const Button = (props) => {
    return(
        <button 
            onClick={props.onClick}
            className={`btn btn-${props.type} ${props.class}`} 
            type={props.buttonType}>
            {props.children}
        </button>
    )
}

---

class Container extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    sendData(e) {
        // logic here
    }

    render() { 
        return ( <Button onClick={(e) => this.sendData(e) } type='primary' class=''>Save Changes</Button> )
    }
}