react传参的三种方案

Posted 2021-03-16 yuri2016

可以直接: https://jsfiddle.net/u0no1t2z/


class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 所以就不需要bind this了,但是没有办法传自定义参数,所以只能通过data-参数 读取
  handleClick = (e) => {
    console.log(‘this is 1:‘,this);
    console.log(‘this is 1:‘,e.target.id);
    //自定义属性的值 
     console.log(‘this e.data:‘, e.currentTarget.getAttribute(‘data-xxx‘));
     
  }
  
  //注意handleClick和handleClick2的区别
  //这种 方法取不到e,因为所有的参数都可以自定义
    handleClick2(id) {
    console.log(‘this 参数:‘, id);   
  }
  
  /*
 <!-- 
 也可以取自定义参数,也可以有e,但是要慎用
 第三种不好,  每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。
      -->
  */
  
     handleClick3(e,id) {
    console.log(‘this id:‘, id);
    console.log(‘this e.id:‘, e.target.id);
    console.log(‘this e.data:‘, e.currentTarget.getAttribute(‘data-xxx‘));
  }
  


  render() {
    return (
     <div>
      <button id="123" data-xxx="789" onClick={this.handleClick}>
        Click me1
      </button>
      
            <button id="1234" data-xxx="7890" onClick={this.handleClick2.bind(this, 123)}>
        Click me2
      </button>
      

        <button id="456" data-xxx="7890" onClick={(e) => this.handleClick3(e,‘123456‘)}>
        Click me3
      </button>
      
      </div>
      
    );
  }
}

ReactDOM.render(<LoggingButton />, document.querySelector("#app"))