react循环多个按钮,这个按钮如何点击一次,将值放在一个数

Posted 2023-04-05

参考技术A react循环多个按钮，这个按钮点击一次，将值放在一个数，将文字数组组成按钮，有其他按钮直接改words数组，存储对应按钮的button。

如何在单击 React js、React 光滑轮播中的按钮时将值传递到数组之外？

【中文标题】如何在单击 React js、React 光滑轮播中的按钮时将值传递到数组之外？

【英文标题】：How to pass the value outside of the arrary while click on button in React js , React slick carousel?

【发布时间】：2020-03-27 17:04:27

【问题描述】：

下面给出了两个对象数组

Head: [ 
        name: "abc", Number: "931", TypeCode: "73HB",
        name: "pbc", Number: "781", TypeCode: "89PH"
      ];
Super: [ 
        name: "hxc", Number: "123", TypeCode: "T78",
        name: "bbc", Number: "567", TypeCode: "09Y",
        name: "TUJ", Number: "091", TypeCode: "OWE"
      ];

   <Slider>
   
      Head.map((item) => (
        <div>
          <h1>item.name</h1>
          <h1>item.Number</h1>
          <h1>item.TypeCode</h1>
        </div>
      )
      )
    
   </Slider>

  <Slider>
   
      Super.map((item) => (
        <div>
          <h1>item.name</h1>
          <h1>item.Number</h1>
          <h1>item.TypeCode</h1>
        </div>
      )
      )
    
   </Slider>

   <div>
    <button  onClick=this.clickHandler()   />
   </div>

   this.clickHandler(TypeCode, TypeCode) 

    console.log(TypeCode, TypeCode)

   

如何通过 onClick 按钮单次传递 Head 数组类型代码和超级数组类型代码。

注意：按钮位于两个映射器的外侧。我为此使用了 react-slick 轮播。提前谢谢。

【问题讨论】：

button 与映射器有什么关系？你能发布更具体的代码吗？这看起来很像伪代码。

实际上没有 rel 按钮在映射器之外。所以在这里我需要将两个映射器值都传递给 onClick 函数。

首先，您不应该在按钮 onclik 事件中调用 clickHandler；将其更改为<button onClick=this.clickHandler />

是的，但我需要在 onClick 时绑定类型代码，这就是原因，

【参考方案1】：

不完全确定您要查找的内容，但如果您只想获取 Head 和 Super 中所有类型代码的数组，您可以这样做：

const typeCodes = Head.concat(Super).map(item =>  item.TypeCode )

【讨论】：

非常感谢，但我需要基于活动幻灯片索引。像 TypeCode: "73HB" & TypeCode: "T78" 在 react slick carousel 中处于活动状态，我只需要这两个。