React中'Button'未定义报错：按钮事件绑定失效如何解决？

嘿，我来帮你梳理下代码里的问题，一步步搞定你的按钮事件失效和Elemental报错的问题～

1. 核心问题：渲染了错误的组件 #

你定义了Passiing自定义组件，但最后ReactDOM.render里渲染的却是<Button />——这根本不是你写的组件！赶紧改成渲染自己的<Passiing />：

ReactDOM.render(<Passiing />, document.getElementById('app'));

2. Button组件的两种解决方案 #

你用了<Button>但没正确处理组件来源，这是另一个关键问题：

• 方案一：用原生HTML按钮
  直接把大写的<Button>改成小写的<button>，这是React支持的原生HTML元素，不需要额外依赖：

  render() {
    return <button onClick={this.scream}>Did you pass?</button>;
  }
  

• 方案二：正确使用Elemental的Button
  之前报错大概率是没安装包或者导入方式不对，先在终端安装依赖：

  npm install elemental --save
  

  然后在代码里正确导入Button组件：

  import { Button } from 'elemental';
  

  之后就能正常使用<Button>标签了。

3. 类组件方法的this绑定问题 #

React类组件里直接传类方法给事件监听器，会丢失this指向（虽然这次alert是全局的，但以后用到this.setState就会出问题），给你三种绑定方式选：

• 构造函数绑定

  class Passiing extends React.Component {
    constructor(props) {
      super(props);
      this.scream = this.scream.bind(this);
    }
    scream() {
      alert('you passed!');
    }
    // ...render方法
  }
  

• 箭头函数定义方法

  class Passiing extends React.Component {
    scream = () => {
      alert('you passed!');
    }
    // ...render方法
  }
  

• render里用箭头函数包裹

  render() {
    return <button onClick={() => this.scream()}>Did you pass?</button>;
  }
  

整理后的完整代码（原生按钮版本） #

import React from 'react';
import ReactDOM from 'react-dom';

class Passiing extends React.Component {
  scream = () => {
    alert('you passed!');
  }

  render() {
    return <button onClick={this.scream}>Did you pass?</button>;
  }
}

ReactDOM.render(<Passiing />, document.getElementById('app'));

export default Passiing;

如果想用Elemental的Button，只要加上import { Button } from 'elemental';，再把<button>换成<Button>就可以啦～

内容的提问来源于stack exchange，提问作者Leon Bogod