事件处理

事件处理

• React 使用自定义事件，而非原生 DOM 事件，即 onClick、onBlur ：为了更好的兼容性
• React 的事件通过事件委托方式进行处理：为了高效
• 通过 event.target 可获取触发事件的 DOM 元素：勿过度使用 ref

当触发事件的元素和需要操作的元素为同一个时，可以不使用 ref ：

class Demo extends React.Component {
  showData2 = (event) => {
    alert(event.target.value);
  };

  render() {
    return (
      <div>
        <input
          onBlur={this.showData2}
          type="text"
          placeholder="失去焦点提示数据"
        />
        &nbsp;
      </div>
    );
  }
}

为什么是onBlur={this.showData2}而不是onBlur={this.showData2()}?因为如果是加了()代表执行，该事件在绑定时就已经执行，所以第一次渲染后就会立刻触发，而且后面不会再次触发

一道思考题

如果希望在执行该函数的时候传参，需要如何写？

• 第一种写法

class Demo extends React.Component {
  showData2 = (msg) => {
    return (event) => {
      console.log(event.target.value, msg);
    };
  };

  render() {
    return (
      <div>
        <input
          onBlur={this.showData2("参数")}
          type="text"
          placeholder="失去焦点提示数据"
        />
        &nbsp;
      </div>
    );
  }
}

• 第二种写法

class Demo extends React.Component {
  showData2 = (event, msg) => {
    console.log(event.target.value, msg);
  };

  render() {
    return (
      <div>
        <input
          onBlur={(event) => this.showData2(event, "参数")}
          type="text"
          placeholder="失去焦点提示数据"
        />
        &nbsp;
      </div>
    );
  }
}