如何将参数传递给过滤器方法并使用不同的参数在 React onClick 事件中调用函数？

Posted 2023-02-23

【中文标题】如何将参数传递给过滤器方法并使用不同的参数在 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() 函数，我不知道该怎么做