获取数组中无限制文本字段的值

时间:2017-07-08 06:33:16

标签: arrays function api reactjs

如何从数组

中的无限input[type="text]获取价值

Children.js

import React, { Component } from 'react';

export default class Children extends Component {

    render() {
        return(
            <div id={"children-"+this.props.number}>
                <div className="form-group">
                    <input type="text" placeholder="Name" className="fullWidth"/>
                </div>
                <div className="form-group">
                    <input type="text" placeholder="Age" className="fullWidth"/>
                </div>
            </div>
        )
    }

}

Parent.js

import React, { Component } from 'react';
import Children from './Children.js'
import RaisedButton from 'material-ui/RaisedButton';

export default class NewProduct extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numOfChildren: 0,
        }
    }

    onAddChildren () {
        this.setState({
            numOfChildren: this.state.numOfChildren + 1
        });
    }

    render() {
        const children = [];
        for (var i = 0; i < this.state.numOfChildren; i += 1) {
            children.push(<Children 
                                number={i} 
                                key={i} 
                            />);
        }

        return (
            <div className="form">
                <div className="tab-content">
                    {children}
                    <RaisedButton
                        label="Add Children"
                        onTouchTap={this.onAddChildren.bind(this)}
                    />
                </div>
            </div>
        );
    }
}

结果必须如下: 值-A-1:&#34;值A 1&#34;,值-B-1:&#34;值B 1&#34; 值-A-2:&#34;值A 2&#34;,值-B-2:&#34;值B 2&#34; 值-A-3:&#34;值A 3&#34;,值-B-3:&#34;值B 3&#34;

所以数组将是这样的:

[
    {
        "id" : 1,
        "value-A" : "value A 1",
        "value-B" : "value B 1"
    }
    {
        "id" : 2,
        "value-A" : "value A 2",
        "value-B" : "value B 2"
    }
    {
        "id" : 3,
        "value-A" : "value A 3",
        "value-B" : "value B 3"
    }
]

如果你能帮助我,我真的很感激。感谢。

2 个答案:

答案 0 :(得分:1)

你可以采用这种方法:

Children.js

import React, { Component } from 'react';

export default class Children extends Component {    
    render() {
        return(
            <div id={"children-"+this.props.number}>
                <div className="form-group">
                    <input type="text" placeholder="Name" className="fullWidth" onChange={({target: {value}}) => this.props.onNameChange(value)}/>
                </div>
                <div className="form-group">
                    <input type="text" placeholder="Age" className="fullWidth" onChange={({target: {value}}) => this.props.onAgeChange(value)}/>
                </div>
            </div>
        )
    }
}

Children.defaultProps = {
    onNameChange: () => null,
    onValueChange: () => null,
}

Parent.js

import React, { Component } from 'react';
import Children from './Children.js'
import RaisedButton from 'material-ui/RaisedButton';

export default class NewProduct extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numOfChildren: 0,
        }
        this.result = [];
    }

    onAddChildren () {
        this.setState({
            numOfChildren: this.state.numOfChildren + 1
        });
    }

    render() {
        const children = [];
        for (var i = 0; i < this.state.numOfChildren; i += 1) {
            this.result[i] = {name: '', age: '', id: i + 1);
            const index = i;
            children.push(<Children 
                                number={i}
                                key={i}
                                onNameChange={value => this.result[index].name = value}
                                onAgeChange={value => this.result[index].name = value}
                            />);
        }

        return (
            <div className="form">
                <div className="tab-content">
                    {children}
                    <RaisedButton
                        label="Add Children"
                        onTouchTap={this.onAddChildren.bind(this)}
                    />
                </div>
            </div>
        );
    }
}

this.result将存储类似你描述的数组的内容。

我没有检查上面的代码,但它应该给你这个想法。

答案 1 :(得分:0)

在州中添加一个字段,以便在构造函数中保存输入结果

this.state = {
 numOfChildren: 0,
 data:[]
}

将一个onChange函数添加到Parent类,将结果推送到状态

onChange(index,key,value){
 let data=this.state.data;
 data[index][key]=value;
 this.setState({data:data});
}

将onChange作为对Child的回调传递

for (var i = 0; i < this.state.numOfChildren; i += 1) {
     children.push(<Children onChange={this.onChange}
                                number={i} 
                                key={i} 
                            />);
}

在儿童中使用数字和值名称和值调用onChange回调

import React, { Component } from 'react';

export default class Children extends Component {

    render() {
        return(
            <div id={"children-"+this.props.number}>
                <div className="form-group">
                    <input type="text" placeholder="Name" className="fullWidth" onChange={(e)=>this.props.onChange(this.props.number,"value-A",e.target.value)}/>
                </div>
                <div className="form-group">
                    <input type="text" placeholder="Age" className="fullWidth" onChange={(e)=>this.props.onChange(this.props.number,"value-B",e.target.value)}/>
                </div>
            </div>
        )
    }

}