如何使用索引（特定于 Ant Design）从数组中删除值？

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

我过去做过类似的事情。去掉了 antd 的 remove 的样板文件，取而代之。每次添加一行时，我都会将该行（对象）推送到 formRows 数组，然后像这样删除：

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