antd v4 一个页面多个表单 动态添加删除

wtto00
  • 128

使用antd v4一个页面动态添加删除多个表单的问题

具体代码以及复现步骤,可点击查看:https://stackblitz.com/edit/react-v8vobb?embed=1&file=index.js
代码:

import React, { Component } from "react";
import { render } from "react-dom";
import { Button, List, Form, Input } from "antd";
import "antd/dist/antd.css";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  addForm = () => {
    const { data } = this.state;
    data.push({});
    this.setState({ data: [...data] });
  };

  removeForm = index => {
    const { data } = this.state;
    data.splice(index, 1);
    this.setState({ data: [...data] });
  };

  renderItem = (item, index) => {
    return (
      <List.Item
        actions={[
          <Button
            key="list-delete"
            type="link"
            size="small"
            danger
            onClick={() => this.removeForm(index)}
          >
            删除
          </Button>
        ]}
      >
        <Form layout="inline" name={`user${index}`}>
          <Form.Item name="id" require>
            <Input placeholder="请输入id" />
          </Form.Item>
          <Form.Item name="name" required>
            <Input placeholder="请输入名称" />
          </Form.Item>
        </Form>
      </List.Item>
    );
  };

  render() {
    const { data } = this.state;
    return (
      <div style={{ padding: 10 }}>
        <Button type="primary" onClick={this.addForm}>
          添加表单
        </Button>
        <List dataSource={data} renderItem={this.renderItem} />
        <h5>步骤:</h5>
        <ul>
        <li>首先点击添加表单三次,添加三个表单</li>
        <li>其次在输入框中分别输入不同的内容</li>
        <li>点击第二个表单右侧的删除按钮</li>
        <li>最后你会发现删除后的表单二的输入值,不是原本之前的第三个表单输入的值,而是依然是之前原本第二个表单的值。</li>
        <li>那么我要怎么做,才能让剩下的第二个表单的值是删除前第三个表单的值</li>
        </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
  1. 初始没有表单
    微信截图_20200315024040.png
  2. 点击添加表单三次,添加三个表单
    微信截图_20200315022659.png
  3. 在输入框中分别输入不同的内容
    微信截图_20200315024223.png
  4. 点击第二个表单右侧的删除按钮,结果如下:
    微信截图_20200315024311.png

结果是多三个表单的值5,6不见了。
我要怎么做,才能让剩下的第二个表单的值是删除前第三个表单的值?

回复
阅读 4.9k
1 个回答
蛋先生DX
  • 307
✓ 已被采纳

修正的例子在这里:https://stackblitz.com/edit/r...

主要原因

1)列表循环的key问题,查了antd的List组件,没有地方可以设置key值,所以猜应该是在List.Item或它的子元素去设置,尝试后后面是对的

2)表单值的还原问题。按正常来讲,data没变,应该不会重新渲染。但尝试过后不行,所以在form值变化时更新state,然后再通过initialValues赋值回去。

第2个问题看上去其实挺奇怪的,这不就证明了List的Datasource一旦变化,所有项的form组件都重新渲染一次吗?没时间去看antd相关组件的源代码,先能解决问题先,就这样吧。

宣传栏