React组件回调实现方法之间有什么区别 [英] React component what's the difference between callbacks implement methods

问题描述

< pre class = snippet-code-js lang-js prettyprint-override> 从'react'导入React；从'./ChildComponent'导入ChildComponent；类SampleComponent扩展了React.Component {sampleCallbackOne =（） => {//做某事}; sampleCallbackTwo =（）=> {//做某事}; render（）{return（< div>< ChildComponent propOne = {this.sampleCallbackOne} propTwo = {（）=> this.sampleCallbackTwo（）} />< / div>）; }}导出默认的SampleComponent；

在此示例中，我有一个我正在处理的onClick事件，并看到我可以通过两种方式将其成功传递给组件的props。

我想知道两种方式到底有什么区别，因为它们似乎以相同的方式起作用？

为什么两种方法都起作用？

解决方案

这是常见的一点似乎很奇怪。

请参考处理事件

  //此绑定是使`this`在回调
中起作用所必需的this.handleClick = this.handleClick.bind（this）; 
 
 handleClick（）{
 console.log（‘this is：’，this）; 
} 
 
< button onClick = {this.handleClick}> 
  

如果不添加（）在 this.handleClick 后面，您需要在构造函数中绑定 this ，否则，您可能需要使用下两个方法：

A。公共类字段语法

，默认情况下在创建React应用

  handleClick =（）=> {
 console.log（‘这是：’，这个）； 
} 
 
< button onClick = {this.handleClick}> 
  

B。箭头功能

这可能会导致性能问题，不建议您参考上面的文档。

  //事件处理相同，但不同之处在于：
< button 
 onClick = {（e）=> this.deleteRow（id，e）} //自动转发，隐式
 /> 
<按钮
 onClick = {this.deleteRow.bind（this，id）} //显式
 /> 
  

样本

在我们的实践中，我们将公共类字段语法用于参数如下所示：

  //在构造函数
中绑定`this` //接收元素传递的参数并获取其事件
 handler =（value：ValueType）=> （事件：React.FocusEvent< HTMLInputElement | HTMLTextAreaElement>）=> {
 //用传递的`value`和获得的`event` 
}进行操作
< NumberFormat 
 ... 
 onBlur = {this.handler（someValue ）} //在此处传递必要的参数
 /> 
  

我们可以通过以下方式共享处理函数

  //通过平面数据结构中存储内容的关键字进行对齐
 handler =（value：字符串）=> （事件：React.ChangeEvent< HTMLInputElement>，id：ValidationItems）=> {
 //使用
 //通过`value`，
 //获取`event`，
 //通过id'
区分的每个元素}; 
 
< YourComponent 
 id = ID_1 
 value = {store.name1} 
 onChange = {this.handler（ name1）} 
 /> ;; 
 
< YourComponent 
 id = ID_2 
 value = {store.name2} 
 onChange = {this.handler（ name2）}} 
 /> ;; 
 
 // ...更多类似的输入文本字段
  

import React from 'react';
import ChildComponent from './ChildComponent';

class SampleComponent extends React.Component {

  sampleCallbackOne = () => {
    // does something
  };

  sampleCallbackTwo = () => {
    // does something
  };

  render() {
    return (
      <div>
          <ChildComponent
            propOne={this.sampleCallbackOne}
            propTwo={() => this.sampleCallbackTwo()}
          />
      </div>
    );
  }
}

export default SampleComponent;

In this example, I have an onClick event that I am handling and saw that I can successfully pass this into the props of the component in two ways.

I was wondering what exactly the difference is in both ways since they appear to function in the same manner?

Why do both ways work?

解决方案

It is a common point that seems weird.

Refer details in document of handling-events

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);

handleClick() {
  console.log('this is:', this);
}

<button onClick={this.handleClick}>

If you don't add () behind this.handleClick, you need to bind this in your constructor, otherwise, you may want to use the next two methods:

A. public class field syntax

which is enabled by default in Create React App

handleClick = () => {
  console.log('this is:', this);
}

<button onClick={this.handleClick}>

B. arrow functions

which may cause performance problems and is not recommended, refer to the document above.

// The same on event handling but different in:
<button
  onClick={(e) => this.deleteRow(id, e)} // automatically forwarded, implicitly
/>
<button
  onClick={this.deleteRow.bind(this, id)} // explicitly
/>

Sample

Basically in our practice, we use public class field syntax with params which would look like below:

// No need to bind `this` in constructor
// Receiving params passed by elements as well as getting events of it
handler = (value: ValueType) => (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  // Do something with passed `value` and acquired `event`
}
<NumberFormat
  ...
  onBlur={this.handler(someValue)} // Passing necessary params here
/>

We can share the handler function by passing different params to it.

// Justify via keyword of stored content in flat data structure
handler = (value: string) => (event: React.ChangeEvent<HTMLInputElement>, id: ValidationItems) => {
  // Do something with 
  // passed `value`, 
  // acquired `event`,
  // for each element diffenced via `id`
};

<YourComponent
  id="ID_1"
  value={store.name1}
  onChange={this.handler("name1")}
/>;

<YourComponent
  id="ID_2"
  value={store.name2}
  onChange={this.handler("name2")}
/>;

// ... more similar input text fields

这篇关于React组件回调实现方法之间有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！