react.js - React 组件可否像DOM那样遍历取值？

问题描述

问 题

下面的组件可不可以像遍历DOM 那样 把itemName的值取出来 谢谢！
<Select

itemName="factory"
onChange={this.selectChangeHandler}
data={factory}
val="id"
text="factory"

/>
<TextField

itemName="name"
onChange={this.inputChangeHandler}
hintText="请输入姓名"
floatingLabelText="姓名"
fullWidth="true"

/>
<Select

itemName="gender"
onChange={this.selectChangeHandler}
data={gender}
val="val"
text="text"

/>
<TextField

itemName="mobile"
onChange={this.inputChangeHandler}
type="number"
hintText="请输入电话"
floatingLabelText="电话"
fullWidth="true"

/>
<TextField

itemName="buyTime"
onChange={this.inputChangeHandler}
type="date"
hintText="请选择购车日期"
floatingLabelText="购车日期"
fullWidth="true"

/>
<TextField

itemName="buyCity"
onChange={this.inputChangeHandler}
hintText="请输入购车地点"
floatingLabelText="购车地点"
fullWidth="true"

/>
<TextField

itemName="model"
onChange={this.inputChangeHandler}
hintText="请输入购买车型"
floatingLabelText="购买车型"
fullWidth="true"

/>
<TextField

itemName="autoNo"
onChange={this.inputChangeHandler}
hintText="请输入车牌号"
floatingLabelText="车牌号"
fullWidth="true"

/>
<Select

itemName="categoryId"
onChange={this.selectChangeHandler}
data={trouble}
val="id"
text="categoryName"

/>

解决方案

遍历组件需要一个前提，就是你的组件都是通过map渲染出来的。

1、你有一个专门存储当前页面下组件各个配置参数的数据结构，通常是一个数组；

var components = [
    {coms_1},
    {coms_2},
    {coms_3},
    ...
]

2、定义一个function用来渲染你的组件，在函数内部写一个map将组件的数据结构传入函数，用switch判断组件的类型，然后每个类型渲染对应的组件，也就是你贴出来的那些组件代码，把参数传入组件。

yourComponents(components) {
    var coms = components.map((result) => {
        switch (result.type) {
            case "type1":
                return <Com1 ref={result.id} {...others} />
                ....
        }
    })
    this.coms = coms
    return coms
}

3、需要注意的一点是这些组件需要传入一个组件id，因为你后面要map这些组件。

4、调用方式通过this.refs.comId。

testFunc() {
    var testComs = this.coms
    for (let i = 0; i < testComs.length; i++) {
            let id = testComs[i].ref
            //这样就能遍历到你当前组件的id，然后可以调用组件内部的函数了。
            console.log(this.refs[id])
            
        }
}

这篇关于react.js - React 组件可否像DOM那样遍历取值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！