如何将索引连接到 Reactjs 元素中的函数

Posted 2023-02-22

【中文标题】如何将索引连接到 Reactjs 元素中的函数

【英文标题】：How can I concatenate index to a function in Reactjs elements

【发布时间】：2020-11-19 22:24:36

【问题描述】：

我有很多编号方法，我想使用循环为输入元素制作单个渲染。

这是我的代码：

new Array(6).fill(0).map((inp, index) =>(
                        <input
                            key = index
                            className="input_otp"
                            theme= color 
                            ref = inputRefs[index]
                            onChange=handleChange
                            onKeyDown=onKeyOTP2
                            onFocus=onFocusOTP2
                            type="tel"
                            maxlength="1"
                            value=state['otp'+ (index + 1)]
                            name='otp'+ (index + 1)
                        />
                        ))
                    

现在我想为这些事件方法添加索引以使其动态onKeyOTP+(index+1) 变为

onKeyDown=onKeyOTP2

就像我对其他属性所做的那样。需要这方面的帮助。

【问题讨论】：

为什么没有一个接受索引作为参数的通用方法？

你是说组件包含像onKeyOTP1、onKeyOTP2、onKeyOTP3等硬编码方法？

可以做到，但这需要很多改变，我想知道这种方式是否可行。

@ChrisG 是的，对

这看起来是一个非常糟糕的设计。我不知道有什么方法可以实现这样的功能——唯一的选择是创建一个包装开关函数，它会根据收到的索引返回适当的函数。

【参考方案1】：

你可以用this绑定函数。

new Array(6).fill(0).map((inp, index)=>(
                    <input
                        key = index
                        className="input_otp"
                        theme= color 
                        ref = inputRefs[index]
                        onChange=handleChange
                        onKeyDown=this[`onKeyOTP$index + 1`]
                        onFocus=onFocusOTP2
                        type="tel"
                        maxlength="1"
                        value=state['otp'+ (index + 1)]
                        name='otp'+ (index + 1)
                    />
                    ))
                

【参考方案2】：

 this.abc1 = () => 
  return '1';


this.abc2 = () => 
  return '2'


for(let i = 1; i< 3; i++)  
  let j = this[`abc$i`];
  console.log("j is", j());

类似的东西