antd动态增减表单时Select中的value属性无效(不显示)

爱被打了一巴掌 2021-09-29 05:28 1489阅读 0赞

在antd的Select标签中，可以设置value和defaultValue。这两者的区别如下：

![20190704105919656.png][]![20190704105940931.png][]

具体可以看这个例子：

[https://codesandbox.io/s/hvi6z][https_codesandbox.io_s_hvi6z]

可以看到是可以通过value或者defaultValue回显数据的。

但是我在把Select标签放到动态增减表单项中时，发现用这两个属性就是回显不了数据。

后面得益于一篇推文，[https://blog.csdn.net/deng1456694385/article/details/87982216][https_blog.csdn.net_deng1456694385_article_details_87982216]

终于发现要在getFieldDecorator中使用initialValue。而不是在Select标签中使用value或defaultValue

核心代码如下：

{getFieldDecorator(`names[${k}]`, {
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: "Please input passenger's name or delete this field.",
                },
              ],
              initialValue: '10%',  // 重点：就是使用这个
            })(
              <Select showSearch style={
       { width: 320 }} placeholder="请选择成员参与">
                  {['10%','20%'].map(item => {
                    return (
                      <Select.Option key={item} value={item}>
                        {item}
                      </Select.Option>
                    );
                  })}
              </Select>
            )}

完整代码如下：

import React from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Form, Select, Icon, Button } from 'antd';
    
    let id = 1;
    
    class DynamicFieldSet extends React.Component {
      remove = 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;
        }
    
        // can use data-binding to set
        form.setFieldsValue({
          keys: keys.filter(key => key !== k),
        });
      };
    
      add = () => {
        const { form } = this.props;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(id++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
          keys: nextKeys,
        });
      };
    
      handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            const { keys, names } = values;
            console.log('Received values of form: ', values);
            console.log('Merged values:', keys.map(key => names[key]));
          }
        });
      };
    
      render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;
        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 },
          },
        };
        getFieldDecorator('keys', { initialValue: [0] });
        const keys = getFieldValue('keys');
        const formItems = keys.map((k, index) => (
          <Form.Item
            {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
            label={index === 0 ? 'Passengers' : ''}
            required={false}
            key={k}
          >
            {getFieldDecorator(`names[${k}]`, {
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: "Please input passenger's name or delete this field.",
                },
              ],
              initialValue: '10%',
            })(
              <Select showSearch style={
       { width: 320 }} placeholder="请选择成员参与">
                  {['10%','20%'].map(item => {
                    return (
                      <Select.Option key={item} value={item}>
                        {item}
                      </Select.Option>
                    );
                  })}
              </Select>
            )}
            {keys.length > 1 ? (
              <Icon
                className="dynamic-delete-button"
                type="minus-circle-o"
                onClick={() => this.remove(k)}
              />
            ) : null}
          </Form.Item>
        ));
        return (
          <Form onSubmit={this.handleSubmit}>
            {formItems}
            <Form.Item {...formItemLayoutWithOutLabel}>
              <Button type="dashed" onClick={this.add} style={
       { width: '60%' }}>
                <Icon type="plus" /> Add field
              </Button>
            </Form.Item>
            <Form.Item {...formItemLayoutWithOutLabel}>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        );
      }
    }
    
    const WrappedDynamicFieldSet = Form.create({ name: 'dynamic_form_item' })(DynamicFieldSet);
    ReactDOM.render(<WrappedDynamicFieldSet />, document.getElementById('container'));

[20190704105919656.png]: https://img-blog.csdnimg.cn/20190704105919656.png
[20190704105940931.png]: /images/20210812/d5274920c37a428da78632ec61a0b02f.png
[https_codesandbox.io_s_hvi6z]: https://codesandbox.io/s/hvi6z
[https_blog.csdn.net_deng1456694385_article_details_87982216]: https://blog.csdn.net/deng1456694385/article/details/87982216