react中函数调用方法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react中函数调用方法相关的知识,希望对你有一定的参考价值。
参考技术A 方式一:内联调用法import React, Component from 'react';
class funcextends Component
constructor(porps)
super(props);
funcOne()
console.log('内联调用法')
render()
return (
)
方式二:配置中调用法
import React, Component from 'react';
class funcextends Component
constructor(porps)
super(props);
this.funcTwo =this.funcTwo.bind(this)
funcTwo()
console.log('配置中调用法')
render()
return (
)
方式三:箭头函数调用法(最推荐)import React, Component from 'react';
class funcextends Component
constructor(porps)
super(props);
funcThree:() =>
console.log('箭头函数调用法')
render()
return (
)
如何将参数传递给过滤器方法并使用不同的参数在 React onClick 事件中调用函数?
【中文标题】如何将参数传递给过滤器方法并使用不同的参数在 React onClick 事件中调用函数?【英文标题】:How to pass a parameter to a filter method & calling the function in React onClick event with different params? 【发布时间】:2020-01-09 14:38:25 【问题描述】:我创建了一个 filter()
方法,如果满足特定条件,则返回一个新数组。
过滤数组的功能:
filterTableData = () =>
const userPackages: any = this.props.lenders.packages;
const userPackageFiltered = userPackages.filter((userPackage) =>
return userPackage.businessStatus.toLowerCase() === this.state.btnValue;
);
console.log(userPackageFiltered);
然后,我使用onClick
React 事件处理程序 来触发function
像这样:
<button
value=this.state.btnValue
onClick=this.filterTableData
>
Invited
</button>
效果很好!
现在,我想重用这个逻辑并将其附加到不同的按钮上。所以,我试图将 parameters
传递给我的 filterTableData()
函数,如下所示:
filterTableData = (parameters) =>
const userPackages = this.props.lenders.packages;
const userPackageFiltered = userPackages.filter((parameters) =>
return parameters.toLowerCase() === this.state.btnValue;
);
console.log(userPackageFiltered);
然后,我试着这样称呼它:
<button
value=this.state.btnValue
onClick=this.filterTableData(userPackage.businessStatus)
>
Invited
</button>
<button
value=this.state.btnValue2
onClick=this.filterTableData(userPackage.type)
>
Draft
</button>
显然,这是行不通的。
这里是 sample code。我想将过滤器值传递到 parameter
以在其他按钮中重用此代码并使用不同的标准过滤数组。
该行为类似于此code sample,请务必检查“查看列”图标和复选框的行为。
【问题讨论】:
不清楚您打算使用parameters
参数做什么。但是您的函数实际上并没有使用它,因为 parameters
变量是 filter
函数参数的本地变量,是它的形式参数。
@RobinZigmond 我想使用parameters
来更改条件,因此它返回给我一个具有不同值的新数组,具体取决于parameters
,但我怀疑我做错了接近
好的,但是条件应该如何依赖参数呢?对于parameters
的不同值,您必须提供输入数据示例以及所需的输出。
@RobinZigmond 我可能做错了。但基本上我试图为filter()
函数提供不同的输入数据来评估它。我正在尝试通过onClick
事件来执行此操作,该事件将使用parameter
调用。我并不是说这是正确的方法。这就是我寻求帮助的原因。您将如何构建一个filter()
函数,您将在许多具有不同评估结果的按钮中使用该函数?
在不知道我的潜在输入是什么样的情况下,我不知道如何编写该函数,以及我将接受哪些参数,以及这将如何改变数据的过滤方式。这就是我要求提供此信息的原因。
【参考方案1】:
如果目标是根据数据中特定字段的真实性进行过滤,其名称在组件中保存为this.state.buttonValue
,那么您可以通过编写过滤器方法来达到预期的效果:
filterTableData(param)
const filteredData = this.state.data.filter(user => user[param]);
// code to use filterdData, presumably using this.setState somewhere
然后定义你的onClick
属性如下:
onClick=() => this.filterTableData(this.state.buttonValue)
您可能不只是想使用值的真实性/虚假性(如果没有实际提供它们,它们可能只会是虚假的) - 您可能需要一个“年龄”过滤器来仅选择用户例如,18 岁以上。目前尚不清楚您的确切需求是什么 - 但上面的代码应该作为一个很好的大纲,唯一的变化将在 filterTableData
中,您可能必须在 param
参数上使用 switch
并定义自定义过滤器每个函数,然后将其传递给this.state.data.filter
。希望你能从中找出你需要为你的情况做些什么。
【讨论】:
【参考方案2】:如果我理解正确,您希望提供自定义参数以及onClick
事件。为此,您需要使用匿名函数。
您可以在 onClick
属性 (FirstTest) 内使用内联匿名函数,也可以在处理程序上使用它 (SecondTest)。
请看下面的例子,如果这就是你要找的,请告诉我。
const mybuttons = [
name: "Invited",
value: "__some__INVITED__value__"
,
name: "Draft",
value: "__some__DRAFT__value__"
]
function FormTest()
const handleClick = parameter => event =>
switch(parameter.name)
case "Invited":
alert("You clicked: INVITED! Value of: " + parameter.value);
break;
case "Draft":
alert("You clicked: DRAFT! Value of: " + parameter.value);
break;
default:
break;
return(
<div>
mybuttons.map(button =>
return <button onClick=handleClick(button)>button.name</button>
)
</div>
);
/**
* FIRST TEST
*/
function FirstTest()
const handleClick = parameter =>
alert(parameter);
return(
<div>
<button onClick=() => handleClick("[FirstTest] My Custom Parameter 1!")>
First Test
</button>
</div>
);
/**
* SECOND TEST
*/
function SecondTest()
const handleClick = parameter => clickevent =>
alert(parameter);
return(
<div>
<button onClick=handleClick("[SecondTest] My Custom Parameter 2!")>
Second Test
</button>
</div>
);
function App()
return(
<div>
<FormTest />
<hr />
<br />
<p>Original Answer:</p>
<FirstTest />
<SecondTest />
</div>
);
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
【讨论】:
我想将parameters
传递给onClick 事件是正确的,但我也添加到filter()
函数中,因此评估不同并且那里给了我另一个数组。不知道这样说清楚了吗?
@ManuelAbascal 是的,这是有道理的 - 虽然,我的示例已经演示了如何做到这一点......我继续并在我的示例中添加了一些额外的代码,试图让它更清楚一点.请检查一下,让我知道您的想法。
嗨,马特,对不起,我刚看到你的回复。感谢您的回复,但是我需要在您的解决方案中将parameters
传递给我的filter()
函数,我不知道该怎么做以上是关于react中函数调用方法的主要内容,如果未能解决你的问题,请参考以下文章
React 组件上调用方法如何传递参数,除了匿名函数用更好的方法吗