PROSAGA码农传奇-ECN-反应执行委托通过道具传递给子

<div class =“post-text”itemprop =“text”>
  <P>
    我猜罪魁祸首在于：
  </p>
   <pre>
    <code>
      onclick={this.onUpdateClient.bind(this)}

</code>
  </pre>
  <P>
    这个位有一些问题：
  </p>
  <UL>
    <LI>
      它应该是
       <code>
        onClick
      </code>
       代替
       <code>
        onclick
      </code>
      。
    </LI>
    <LI>
      你有约束力
       <code>
        onUpdateClient
      </code>
       两次，在构造函数内部和事件处理程序内部。
    </LI>
  </UL>
  <P>
    所以我建议2个可能的修复：
  </p>
   <pre>
    <code>
      class UserProfile extends Component {
  constructor(props){
    super(props);
    this.onUpdateClient = this.onUpdateClient.bind(this);
  }

onUpdateClient(){
    // Your code here
  }

render() {
    return (
      <div>
        <Button onClick={this.onUpdateClient}>
          Update Profile
        </Button>
      </div>
    );
  }
}

</code>
  </pre>
  <P>
    要么
  </p>
   <pre>
    <code>
      class UserProfile extends Component { 
  onUpdateClient(){
    // Your code here
  }

render() {
    return (
      <div>
        <Button onClick={this.onUpdateClient.bind(this)}>
          Update Profile
        </Button>
      </div>
    );
  }
}

</code>
  </pre>
  <P>
    的<strong>
      编辑：
    </强>
     第一个修复更为可取，因为事件处理程序可以在渲染中重复使用，因此可以为您的应用提供小的性能提升（取决于组件的实际成本）。第二种方法在每次重新渲染组件时都会创建一个新函数，从长远来看，这会明显减慢您的应用程序的速度
  </p>
  <P>
    忘了提一下，如果安装了JS转换器，这种语法也是可能的：
  </p>
   <pre>
    <code>
      class UserProfile extends Component { 
  onUpdateClient = () => {
    // Your code here
  }

render() {
    return (
      <div>
        <Button onClick={this.onUpdateClient}>
          Update Profile
        </Button>
      </div>
    );
  }
}

</code>
  </pre>
  <P>
    看起来不错，整洁不是吗？ :)
  </p>
  <P>
    如需进一步参考，请访问
    <a href="https://reactjs.org/docs/faq-functions.html" rel="nofollow noreferrer">
      反应文档
    </A>
  </p>
</DIV>