如何使用索引从数组中移除值(特定于Ant设计)？

Question

我正在使用ReactJs和Ant Design创建一个调查问卷类型的表单。这是How to create a questionnaire type form using Ant Design?的后续问题

现在，我成功地添加了新问题及其各自的答案，但没有成功地删除它们。假设我添加了三个问题，当我试图删除其中任何一个问题时，总是删除最后一个问题。移除的相关代码如下：

remove = k => {
    console.log(k);
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue("keys");
    // We need at least one passenger
    if (keys.length === 1) {
      return;
    }
    keys.splice(k, 1);
    // can use data-binding to set
    form.setFieldsValue({
      keys: keys
    });
    console.log(keys);
  };

完整的代码可以在demo on codesandbox.io中找到。

Answer 1

我以前也做过类似的事情。去掉了and的remove的样板文件，取而代之的是这个。每次我添加一行时，我将该行(对象)推入formRows数组，然后像这样删除：

  remove = key => {
    const newRows = this.state.formRows.filter(r => r.key !== key)
    this.setState(
      prev => ({
        formRows: newRows
      })
    )
  }