zoukankan      html  css  js  c++  java
  • React 组件 onClick的 bind 问题

    以前对 bind 一直模模糊糊的,今天就再从官网捋一下

    必须谨慎对待JSX回调函数中的 this,在 javascript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了onClick,当你调用这个函数的时候 this 的值会变为 undefined

    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')
    );
    

    如果觉得bind 很麻烦,那么就使用箭头函数(官网:如果你正在使用实验性的 public class fields 语法,你可以使用 class fields 正确的绑定回调函数)

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

    如果你没有使用 class fields 语法,你可以在回调中使用箭头函数:

    此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下,这没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。(所以还是手动绑定一下的比较好)

    class LoggingButton extends React.Component {
      handleClick() {
        console.log('this is:', this);
      }
    
      render() {
        // 此语法确保 `handleClick` 内的 `this` 已被绑定。
        return (
          <button onClick={() => this.handleClick()}>
            Click me
          </button>
        );
      }
    }
    
  • 相关阅读:
    redis、memcache、mongoDB有哪些区别(转载)
    初识spring与quartz整合实现定时任务
    使用CXF与Spring集成实现RESTFul WebService
    Linux top
    JS操作Radio与Select
    初识Redis
    JVM基础学习
    自动装配【Spring autowire】
    包含中文的字符串中截取前N个字符
    EF中Json序列化对象时检测到循环引用的解决办法
  • 原文地址:https://www.cnblogs.com/ssaylo/p/12980468.html
Copyright © 2011-2022 走看看