在React中使用'ref'作为数组 [英] Using 'ref' as array in React

查看:167
本文介绍了在React中使用'ref'作为数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我尝试在React with Redux中将输入作为数组引用时,我遇到了一些问题.

I have some issues when im trying to reference inputs as arrays in React with Redux.

下面的代码在数组中每篇文章对应一个Panel.

The code below maps one Panel per article in the array.

var articles = this.props.item.array.articles.map((article, index) => {
     return <Panel key={index} header={'Article ' + index}>
        <Input type='select' ref='id' label='Article' defaultValue={article.id} >
          {articles}
        </Input>
     </Panel>
})

我正在尝试构造ref,以使它们处于数组格式,目前看来这是不可能的.引用数组.#1899

I'm trying to construct the refs so that they're in an array format, which does not seem to be possible at the moment. Array of references. #1899

我想我可以通过创建某种 ref ="article [" + counter +] [id]"

I guess i could solve this by create some sort of ref="article["+counter+"][id]"

但这是一个可怕的解决方案,我真的不想走这条路.

But that is a horrible solution, and i really don't want to go down that path.

下面的json数组将是我所需的refs格式:

The json array below would be my desired format for the refs:

"articles": [
        {
            "_joinData": {
                "price": "100",
                "quantity": "50"
            },
            "id": "05f54207-fb6f-40b5-820e-26059a803343"
        },
        {
            "_joinData": {
                "price": "200",
                "quantity": "70"
            },
            "id": "05f54207-fb6f-40b5-820e-26059a803343"
        }
]

价格和数量指数将是2个输入.

The price & quantity index would be 2 more inputs.

我决定不包含在代码示例中.

Which i've decided to not include in the code example.

一个很好的解决此问题的方法将不胜感激.

A nice solution to this problem would be very appreciated.

推荐答案

我相信您可以使用 Object.keys 像数组一样遍历 this.refs .

I believe you can iterate through this.refs like an array by using Object.keys.

例如 Object.keys(this.refs).forEach(key => func(this.refs [key]))

为每个引用运行 func 函数.

这篇关于在React中使用'ref'作为数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆