React组件回调实现方法之间有什么区别

本文介绍了React组件回调实现方法之间有什么区别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 从'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 callbackthis.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 syntaxwhich is enabled by default in Create React ApphandleClick = () => { console.log('this is:', this);}<button onClick={this.handleClick}>B. arrow functionswhich 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/>SampleBasically 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 ithandler = (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 structurehandler = (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组件回调实现方法之间有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！