ReactJS - 如何在单击按钮时添加更多文本、文本字段、选择字段

ReactJS - How can I add more text, textfields, selectfields upon clicking a button?

本文关键字：文本 字段 选择 添加 按钮 单击 ReactJS      更新时间：2023-09-26

我想添加更多带有文本字段选择字段的文本。点击后如何添加？

下面是我的代码。我想要一套新的打印方法，可以在下面看到。

例如，一开始我有这组数据，选择
打印方法（选择场）
位置：（文本字段）
高度：（文本字段）
宽度：（文本字段）
颜色： （文本字段）

单击后，我希望它像这样
打印方法（选择字段）
位置： 高度：（文本字段）
宽度：（文本字段）
颜色： （文本字段）
打印方法（选择字段）
位置：（文本字段）
高度：（文本字段）
宽度：（文本字段）
颜色： （文本字段）
并在每次点击时添加更多内容

我建议做类似下面的事情（伪代码）。请记住，这非常简单，未经测试。同样，像这样使用索引并不是最聪明的事情，使用某种自然 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>);
    });
  }
}>
相关文章：