有一種迷茫叫一臉懵逼，當(dāng)明白真相時恍然大悟。

恍然大悟

在ant design的官網(wǎng)中有一個demo叫動態(tài)增減表單項，非常方便的使用在動態(tài)增加選項的功能，但是并沒有提供設(shè)置默認值，而且在所有使用Form.List的demo中，也都沒有。!_! 一臉懵逼的表示，怎么展現(xiàn)默認值啊。

官網(wǎng)的DEMO

demo的樣例代碼為

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" >
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field => (
                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
                  <Form.Item
                    {...field}
                    name={[field.name, 'startTime']}
                    fieldKey={[field.fieldKey, 'startTime']}
                    rules={[{ required: true, message: 'Missing first name' }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, 'endTime']}
                    fieldKey={[field.fieldKey, 'endTime']}
                    rules={[{ required: true, message: 'Missing last name' }]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

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

展示的效果為

默認狀態(tài)

設(shè)置默認值

在antd的4.x版本中，在form層級上使用initialValues來設(shè)置默認值。

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" initialValues={{"users": [{
        fieldKey: 0,
        isListField: true,
        key: 0,
        name: 0,
        endTime: "14:48",
        startTime: "14:48",
      }, {
        fieldKey: 1,
        isListField: true,
        key: 1,
        endTime: "14:48",
        startTime: "14:48",
        name: 1
      }]}}>

添加了initialValues并為name為“users”的Form.List設(shè)置默認值。完整的代碼為

<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" initialValues={{"users": [{
        fieldKey: 0,
        isListField: true,
        key: 0,
        name: 0,
        endTime: "14:48",
        startTime: "14:48",
      }, {
        fieldKey: 1,
        isListField: true,
        key: 1,
        endTime: "14:48",
        startTime: "14:48",
        name: 1
      }]}}>
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field => (
                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
                  <Form.Item
                    {...field}
                    name={[field.name, 'startTime']}
                    fieldKey={[field.fieldKey, 'startTime']}
                    rules={[{ required: true, message: 'Missing first name' }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, 'endTime']}
                    fieldKey={[field.fieldKey, 'last']}
                    rules={[{ required: true, message: 'Missing last name' }]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

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

運行的默認效果為：

有默認值的效果

不明白時千難萬難，舉步維艱。當(dāng)看到真相的時候，一馬平川，神清氣爽?。?！

// END 喜歡秋天的風(fēng)，帶著點點的果香