antdpro+form中两个Input用的同一个name，修改时，只修改其中一个

原创于 2022-11-02 16:38:41 发布 · 576 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #ecmascript

收录于

本文介绍如何在AntdPro的Form组件中解决两个Input组件使用相同name属性的问题，通过调整name属性并利用form.setFieldsValue()方法实现数据的正确绑定。

antdpro+form中两个Input用的同一个name，修改时，只修改其中一个。

看例子：

const MaintenForm =() =>{

 const [form]: FormInstance[] = Form.useForm();
    //请求接口，返回一个details,details为接口返回的数据


<Form form={form}>
<Row>
<Col>
<ProFormText name={'account_name'} label="用户名" />
<ProFormText name={'account_id'} label="用户id" />
</Col>
<Col>
<ProFormText name={'account_name1'} label="用户名" />
<ProFormText name={'account_id1'} label="用户id" />

</Col>
</Row>
</Form>

}

解法：改变其中一列的name，用form.setFieldsValue()。相当于在拿到后端传过来的数据之后，前端重新拼接。利用form.setFieldsValue()拼接。自己定义key值

const MaintenForm =() =>{

 const [form]: FormInstance[] = Form.useForm();
    //请求接口，返回一个details,details为接口返回的数据


useEffect(()=>{
    form.setFieldsValue({
        account_name1:details?.account_name,
        account_id1:details?.account_id
}) 

},[]) //有依赖就加上依赖

<Form form={form}>
<Row>
<Col>
<ProFormText name={'account_name'} label="用户名" />
<ProFormText name={'account_id'} label="用户id" />
</Col>
<Col>
<ProFormText name={'account_name1'} label="用户名" />
<ProFormText name={'account_id1'} label="用户id" />

</Col>
</Row>
</Form>

}