Question

此表格的状态包括三个级别：A＆gt; B> ç

A: [
            {
                name: "foo",
                ...
                B: [
                    {
                        name: "bar",
                        ...
                        C:[
                            {
                                name: "baz",
                                ...
                            },
                            {
                                name: "bat":,
                                ...
                            }
                        ]
                    },
               ]
            },
            ...
]

基本上，三个资源中每个名称属性都需要一个输入字段，这两个资源是彼此的子项。

 <div className="subvariation-tree">
                {
                this.state.A.map( (a, aIdx) =>
                    <div key={aIdx}>
                        <input type="text"
                            value={this.state.A[aIdx].name}
                            onChange={this.handleInputChange} />
                            {
                            a.B.map( (b, bIdx)  =>
                                <div key={bIdx}>
                                    <input type="text"
                                        value={this.state.A[aIdx].B[bIdx].name}
                                        onChange={this.handleInputChange} />
                                        {
                                        b.C.map( (c, cIdx) =>
                                            <div key={cIdx} >
                                                <input type="text"
                                                    value={this.state.A[aIdx].B[bIdx].C[cIdx]}
                                                    onChange={this.handleInputChange} />
                                            </div>
                                        )
                                        }
                                    </div>
                                </div>
                            )
                            }
                        </div>
                    </div>
                )
                }
            </div>

问题是，我想这似乎很明显，但我无法在循环中为C属性访问aIdx。

这有什么办法吗？这是一个荒谬的设计吗？ React的一个荒谬的用例？我对这个想法非常挣扎。我想我可以用vanilla JavaScript来管理它，但我想学习React。

Answer 1

你可以简单地写一下

<div className="subvariation-tree">
{
  this.state.A.map( (a, aIdx) => {
    return <div key={aIdx}>
            <input type="text" value={a.name} onChange={this.handleInputChange} />
             {
                a.B.map( (b, bIdx)  => {
                  return <div key={bIdx}>
                           <input type="text" value={b.name} onChange={this.handleInputChange} />
                           {
                              b.C.map( (c, cIdx) => {
                                return <div key={cIdx} >
                                         <input type="text" value={c.name} onChange={this.handleInputChange} />
                                        </div>
                              })
                            }
                          </div>
                })
               }
           </div>
  })
}
</div>

Answer 2

您实际上应该可以访问aIdx循环中的C。

如果问题是它在输入中显示[object Object]，那是因为您遗漏了.name元素的C。

所以而不是

value={this.state.A[aIdx].B[bIdx].C[cIdx]}

使用

value={this.state.A[aIdx].B[bIdx].C[cIdx].name}

但正如Sakshi Nagpal's answer提到的那样，您可以直接使用a.name，b.name和c.name，因为您拥有迭代对象的局部变量。

以下是两种方法的演示：https://codesandbox.io/s/mz82r16o8p

从动态生成的表单中反复访问状态，深层次

2 个答案: