6. react - 事件绑定

1.  事件绑定方式一： 全局方法返回react dom 方式绑定

function ActionLink() {
    function handleClick(e) {
      e.preventDefault();
      console.log('The link was clicked.');
    }
     // 使用 onClick={handleClick} 绑定事件
    return (
      <a href="#" onClick={handleClick}>
        Click me
      </a>
    );
}
var element = ActionLink()  // 返回一个reactDom

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

    render () {
        return (
            <div>
                {element}  // 挂载reactDom
            </div>
        )
    }

}

2. 绑定事件方式二： 成员方法绑定

　构造方法中改变this指向： this.handleClick = this.handleClick.bind(this);

　rend 方法的dom中绑定事件： onClick={this.handleClick}>

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

3. 如果不使用 Function.prototype.bind 改变 this 指向，怎么绑定事件？ 有两种方式：

　　方式1： 使用 public class fields 语法 。 官方建议使用该方式。

　　方式2：使用箭头函数。每次渲染都会创建不同的回调。如果该回调作为参数传递给子组件时，会触发重新渲染，有性能问题。

// 方式1
class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

---

// 方式2
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

4. 事件处理函数中传递参数

// 1. 箭头函数传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// 2. 普通方式
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// 3. 匿名函数
<button onClick={function (e) { this.deleteRow(id, e) }.bind(this)}>Delete Row</button>

class LoggingButton extends React.Component {
  handleClick1(e, id) {
    console.log(e, id)
  }

  handleClick2(id, e) {
    console.log(id, e)
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <div>
        <button onClick={(e) => this.handleClick1(e, "id1")}>  // 事件对象 和 其他参数传递
          Click me 1
        </button>

        <button onClick={this.handleClick2.bind(this, "id2")}>  // 实参传递， 默认传递事件对对象为第二个参数
          Click me 2
        </button>
      </div>
      
    );
  }
}
ReactDOM.render(
  <LoggingButton />,
  document.getElementById('root')
);

 

注意事项：

　　1. react 中事件默认行为不能通过 return false 阻止，必须 e.preventDefault();

       2. react 中的事件对象 e 不是原生的事件对象，是包装后的；

 

this.deleteRow.bind(this, id)