React学习笔记（六）

五、事件处理

React事件绑定属性的命名采用驼峰写法，不同于传统DOM全部小写。

如果采用JSX的语法，事件函数需要用大括号{}包裹函数名，不同于传统DOM字符串小括号的方式。

<button onClick={ activateLasers }>
    Activate Lasers
</button>

在React中另一个不同是你不能使用返回false的方式阻止默认行为，必须明确使用preventDefault来阻止。

function handleClick() {
    e.preventDefault();
    console.log('The link was clicked.');
}

return (
    <a href="#" onClick={ handleClick }>
        CLICK ME
    </a> 
);

React通常在元素初始渲染的时候提供一个事件，然后绑定给元素即可：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  render() {
    return (
      <button onClick={ this.handleClick }>
        { this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
    
  }
  
}

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

注意这里使用了bind方法来指向this为当前类的实例。如果不想使用bind可以使用【属性初始化器】来解决。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    };
    
    // this.handleClick = this.handleClick.bind(this);
  }
  
  // 这里使用了箭头函数
  // React文档称为【属性初始化器】
  // React文档推荐使用这两种方式
  handleClick = () => {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  render() {
    ...
  }
}

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

还可以在回调函数中使用箭头函数（这样做可能有性能问题）：

如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。

class Toggle extends React.Component {
  constructor(props) {
    ...
  }
  
  handleClick() {
    ...
  }
  
  render() {
    // 这里使用了箭头函数
    return (
      <button onClick={ e => this.handleClick(e) }>
        { this.state.isToggleOn ? 'ON' : 'OFF' }
      </button>
    );
    
  }
  
}

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

1. 向事件处理程序传递参数

两种方式：

箭头函数 <button onClick={ e => this.deleteRow(id, e) }>Delete Row</button>
bind方法 <button onClick={ this.deleteRow.bind(this, id) }>Delete Row</button>

通过箭头函数传递的参数就是方法被调用写得顺序入参。
而bind方法传递的参数，整体排在e事件对象前面：

class Popper extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'Hello world!',
      id: '001'
    };
  }
  
  preventPop(id, name, e) {
    e.preventDefault();
    alert(id + ': ' + name);
  }
  
  render() {
    return (
      <div>
        <p>Pass Params</p>
        { /* Pass params via bind() method. */ }
        <a href="https://google.com" onClick={ this.preventPop.bind(this, this.state.id, this.state.name) }>Click Me</a>
      </div>
    );
  }
}

ReactDOM.render(
  <Popper />,
  document.querySelector('#root')
);

运行效果：