Javascript 具有值的行的复制函数

我正在我的应用程序中重新创建此模块。我正在使用AntDesign。 但是我想有一个它的复制函数，并且得到已经填充的值

这是我的代码，但它不起作用

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{表单、输入、图标、按钮}；
设id=0；
类DynamicFieldSet扩展了React.Component{
删除=k=>{
const{form}=this.props；
//可以使用数据绑定来获取
常量键=form.getFieldValue（“键”）；
//我们至少需要一名乘客
如果（keys.length==1）{
回来
}
//可以使用数据绑定来设置
form.setFieldsValue({
keys:keys.filter（key=>key！==k）
});
};
添加=（）=>{
const{form}=this.props；
//可以使用数据绑定来获取
常量键=form.getFieldValue（“键”）；
const nextKeys=keys.concat（id++）；
//可以使用数据绑定来设置
//重要提示！通知表单以检测更改
form.setFieldsValue({
钥匙：下一个钥匙
});
};
重复=k=>{
const{form}=this.props；
常量键=form.getFieldValue（“键”）；
form.setFieldsValue({
keys:keys.find（key=>key==k）
});
};
handleSubmit=e=>{
e、 预防默认值（）；
this.props.form.validateFields（（错误，值）=>{
如果（！err）{
常量{键，名称}=值；
log（“接收到的值的形式：”，值）；
log（“合并值：”，keys.map（key=>names[key]）；
}
});
};
render（）{
const{getFieldDecorator，getFieldValue}=this.props.form；
常量formItemLayout={
labelCol：{
xs:{span:24}，
sm:{span:4}
},
包装纸：{
xs:{span:24}，
sm:{span:20}
}
};
const formItemLayoutWithOutLabel={
包装纸：{
xs:{span:24，偏移量：0}，
sm:{span:20，偏移量：4}
}
};
getFieldDecorator（“键”{initialValue:[]}）；
常量键=getFieldValue（“键”）；
常量formItems=keys.map（（k，索引）=>(
{getFieldDecorator（`names[${k}]`{
ValidateTracger:[“onChange”，“onBlur”]，
规则：[
{
要求：正确，
空白：对，
信息：“请输入乘客姓名或删除此字段。”
}
]
})(
)}
{keys.length>1(
这个。删除（k）}
/>
这个。重复（k）}
/>
)：null}
));
返回(
{formItems}
添加字段
提交
);
}
}
const WrappedDynamicFieldSet=Form.create（{name:“dynamic\u Form\u item”}）(
动态场集
);
ReactDOM.render(
,
document.getElementById（“容器”）
);

在复制方法中，您可以获得所单击字段的

键

或

索引。表单值中的
键
数组跟踪您拥有的字段数量及其索引。表单值中的
名称
数组跟踪每个字段的值。在复制方法中，您需要通过添加到
键
数组来
添加一个字段
，然后通过添加到
名称
数组来设置该字段的值。请参见下面的方法：

注意：在您的
添加
方法中，使用
键。长度
而不是
id
来增加。这将始终保持所有键的唯一性

add = () => {
    const { form } = this.props
    // can use data-binding to get
    const keys = form.getFieldValue("keys")
    const nextKeys = keys.concat(keys.length)
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
        keys: nextKeys
    })
}

duplicate = k => {
    const { form } = this.props

    // We are using keys to track number of fields
    // and using names to track the value of each field
    const { keys, names } = form.getFieldsValue()

    // We can use the key to access the value of the field for
    // for which the button was clicked
    const nameToDuplicate = names[k]

    /**
     * Add a key to 'keys' array in antd form to render extra field
     * Once the field is rendered we can add the name to the
     * 'names' array of antd form.
     *
     * Note: We add keys first and then add name in callback method because
     * we cannot set a value for a form field before rendering it.
     */
    const newKeys = [...keys, keys.length]

    form.setFieldsValue({ keys: newKeys }, () => {
        const newNames = [...names, nameToDuplicate]
        form.setFieldsValue({ names: newNames })
    })
}

复制时，您想将名称复制到下一个字段还是最后一个字段？@Hussainnawazlaley始终在最后一个字段谢谢！！我用你的代码，特别是解释，让它工作了
add = () => {
    const { form } = this.props
    // can use data-binding to get
    const keys = form.getFieldValue("keys")
    const nextKeys = keys.concat(keys.length)
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
        keys: nextKeys
    })
}

duplicate = k => {
    const { form } = this.props

    // We are using keys to track number of fields
    // and using names to track the value of each field
    const { keys, names } = form.getFieldsValue()

    // We can use the key to access the value of the field for
    // for which the button was clicked
    const nameToDuplicate = names[k]

    /**
     * Add a key to 'keys' array in antd form to render extra field
     * Once the field is rendered we can add the name to the
     * 'names' array of antd form.
     *
     * Note: We add keys first and then add name in callback method because
     * we cannot set a value for a form field before rendering it.
     */
    const newKeys = [...keys, keys.length]

    form.setFieldsValue({ keys: newKeys }, () => {
        const newNames = [...names, nameToDuplicate]
        form.setFieldsValue({ names: newNames })
    })
}