如何添加或删除两个输入字段并将这些输入存储到一个数组中？

Question

我想添加或删除输入文本字段并将它们存储到数组中。它始终采用最后一对输入。

我的前端的屏幕截图：

码：

<form className="form-inline">
        {this.state.newData.map((data, index) => (
          <div id={`index-${index}`} className="form-group" >
            <AvField
                    placeholder="Item Name"
                    id={`index-${index}`}
                    type="text"
                    name="itemName"/>
            <AvField
                    placeholder="Item Value"
                    id={`index-${index}`}
                   type="text"
                   name="itemValue"
            />
            <Button style={{ margin: 7 }} onClick={this.handleDelete(index)} color="danger">
              {' '}
              -{' '}
            </Button>
          </div>
        ))}
        <Button style={{ margin: 7 }} onClick={this.addNew} color="success">
          {' '}
          +{' '}
        </Button>
        </form>

Answer 1

我假设你的意思是删除总是取出数组的最后一个值而不是指定的索引？尝试绑定handleDelete：

<Button style={{ margin: 7 }} onClick={this.handleDelete.bind(this, index)} color="danger">
  {' '}
  -{' '}
</Button>

可以通过更详细的代码/您想要完成的任务来帮助更多。