javascript - 如何使用索引从数组中删除值(特定于 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
      })
    )
  }