Question

我想用textfields选择字段添加更多文本。如何在点击时添加它？

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

例如，在开始时，我有这组数据和选择
打印方式（选择字段）
位置:(文本字段）
身高:(文本字段）
宽度:(文本字段）
颜色:(文本字段）

点击后我希望它像这样打印方式（选择字段）
职位：
身高:(文本字段）
宽度:(文本字段）
颜色:(文本字段）
打印方式（选择字段）
位置:(文本字段）
身高:(文本字段）
宽度:(文本字段）
颜色:(文本字段）

并添加更多每次点击

Answer 1

我建议做类似以下的事情（伪代码）。请记住这是超级简单的，没有经过测试。使用像这样的索引并不是最聪明的事情，使用某种自然id（或随机生成的id）可能是一个更聪明的想法，但这应该让你开始。然后，Print组件会根据它找到的每个print从问题中呈现自己的代码（确保它使用正确的道具并调用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>);
    });
  }
}>

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

1 个答案: