react-antd-动态form表单

react-antd-动态form表单

1.以官网的form.List为基础进行改造：动态增加表单，默认且至少为一项，不上限
2.虚拟设置formList的初始值

• render渲染部分

	<Form 
         name="dynamic_form_item" 
          onFinish={this.onFinish} 
          ref={this.listForm}
          initialValues= {{
              sendTo: [
                  '',
              ]
          }}
      >
          <Form.List
              name="sendTo"
              rules={[
              {
                  validator: async (_, names) => {
                  if (!names || names.length < 1) {
                      return Promise.reject(new Error('At least 1 passengers'));
                  }
                  },
              },
              ]}
          >
              {(fields, { add, remove }, { errors }) => (
                  <>
                      {
                          fields.map((field, index) => {
                              return (
                                  <div key={field.key}>
                                      <Row>
                                          <Col>
                                              <Form.Item
                                                  label={'用户名'}
                                                  {...field}
                                                  validateTrigger={['onChange', 'onBlur']}
                                              >
                                                  <Input placeholder="请输入用户名"  />
                                              </Form.Item>
                                          </Col>
                                          <Col style={{margin:'0 8px'}}>
                                              <Button
                                                  type="dashed"
                                                  icon={<MinusCircleOutlined />}
                                                  shape='circle'
                                                  onClick={() => remove(field.name)}
                                                  disabled = { fields.length > 1 ? false : true }
                                              >

                                              </Button>
                                          </Col>

                                          <Col >
                                              <Button
                                                  type="dashed"
                                                  onClick={() => add()}
                                                  icon={<PlusOutlined />}
                                                  shape='circle'
                                              >
                                              </Button>
                                          </Col>
                                      </Row>
                                  </div>
                              )
                          })
                      }
                      <Form.ErrorList errors={errors}/>
                  </>
              )}
          </Form.List>


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

          <Button onClick={this.init}>设置formlist初始值</Button>

      </Form>

• 虚拟设置初始值

init = () => {
        let arr = ['112','fdasf','2321321']
        this.listForm.current.setFieldsValue({
            sendTo: arr
        })
    }
    onFinish = values => {
        console.log(values);
    }

[^1]转载请标明出处。