如何在动态 Antd 表单中默认显示第一项？答案

【问题标题】：How to show the first item by default in a dynamic Antd form?如何在动态 Antd 表单中默认显示第一项？
【发布时间】：2020-05-16 00:08:10
【问题描述】：

这对某人来说可能很容易。在 AntD 的表单文档和演示 here 中，他们的演示以没有字段开头。您必须单击动态表单的“+ 添加字段”按钮才能添加并显示第一个字段，如下所示..

如果我希望它从显示第一个字段开始，而不必先单击“+ 添加字段”按钮，那是如何完成的？似乎我需要在渲染时以某种方式调用 add 函数？无论如何，我正在寻找它在我按下“添加字段”按钮后最初加载表单时显示第一个乘客，例如在此屏幕截图中..

换句话说，我希望始终至少有 1 名乘客。

他们的演示代码可以在上面的链接中查看，该链接将您带到他们的文档，但这里也有：

import { Form, Input, Button } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
};

const DynamicFieldSet = () => {
  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish}>
      <Form.List name="names">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Form.Item
                  {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                  label={index === 0 ? 'Passengers' : ''}
                  required={false}
                  key={field.key}
                >
                  <Form.Item
                    {...field}
                    validateTrigger={['onChange', 'onBlur']}
                    rules={[
                      {
                        required: true,
                        whitespace: true,
                        message: "Please input passenger's name or delete this field.",
                      },
                    ]}
                    noStyle
                  >
                    <Input placeholder="passenger name" style={{ width: '60%' }} />
                  </Form.Item>
                  {fields.length > 1 ? (
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      style={{ margin: '0 8px' }}
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  ) : null}
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: '60%' }}
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<DynamicFieldSet />, mountNode);
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

你可以使用initialValues 道具。看看这个例子：

https://codesandbox.io/s/dynamic-form-item-ant-design-demo-qm1d8

【讨论】：

啊，很有趣，所以当在 Form 标签上使用时，它基本上完成了这一点。我在 Form.Item 标记中将它用于另一个目的（以确保我的一个非必填字段不为空），但这并没有相同的效果。很有用！

【解决方案2】：

如果您为表单组件设置initialValues @HamidSarani 指出的，它将自动添加所需数量的字段。只是，不要像他的例子那样放一个空字符串，因为你不会显示占位符。将其设置为undefined。这样，占位符也会显示出来。

<Form initalValues={{names: [undefined]}}>

【讨论】：