如何从数组
中的无限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"
}
]
如果你能帮助我,我真的很感激。感谢。
答案 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>
)
}
}