我想使用文本字段选择字段添加更多文本。如何点击添加?
下面是我的代码。我想要一套新的打印方法,如下所示。
例如,一开始我有这组带有选择的数据
打印方法(选择字段)
位置:(文本字段)
高度:(文本字段)
宽度:(文本字段)
颜色:(文本字段)
点击后我希望它像这样
打印方法(选择字段)
位置:
高度:(文本字段)
宽度:(文本字段)
颜色:(文本字段)
打印方法(选择字段)
位置:(文本字段)
高度:(文本字段)
宽度:(文本字段)
颜色:(文本字段)
每次点击都会添加更多内容
最佳答案
我建议执行如下操作(伪代码)。请记住,这非常简单且未经测试。另外,像这样使用索引并不是最聪明的事情,使用某种自然 ID(或随机生成的 ID)可能是一个更聪明的想法,但这应该可以帮助您入门。然后,Print 组件只需为它找到的每个 print
渲染问题中您自己的代码(确保它使用正确的 props 并调用 onAddPrint 方法 (this.props.onAddPrint
)。
class PrintForm extends React.Component {
constructor() {
//Initialize with one, empty one
this.state = {
prints: [{posStyle: undefined}]
}
}
onAddPrint(print) {
let newPrints = this.state.prints[print.index] = print;
newPrints.push({posStyle: undefined});
this.setState({
prints: newPrints,
});
}
render() {
return this.state.prints.map(function(print, index) {
return(<Print onAddPrint={this.onAddPrint} id={print.id} posType={this.posType} index={index} {all other props}></Print>);
});
}
}>
关于javascript - ReactJS - 如何在单击按钮时添加更多文本、文本字段、选择字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35695129/