react+antd遇到的问题

最新推荐文章于 2023-07-20 15:34:43 发布

Calmness °

最新推荐文章于 2023-07-20 15:34:43 发布

阅读量201

点赞数

分类专栏：前端文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_43301990/article/details/117387821

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了在React应用中如何获取和更新Form表单内的值，以及解决Modal组件内p标签不自动换行的问题。通过使用`setFieldsValue`更新表单字段，`getFieldsValue`获取多个字段的值。对于Modal中的p标签，通过添加`word-wrap: break-word`样式实现内容换行。

摘要由CSDN通过智能技术生成

一、如何获取或更新Form中的值

注意，代码段中username,name,age必须与form表单中form.item设置的name名相同。

更新Form表单里面的值

//函数组件
//在Form中添加属性ref={formRef}
const formRef = React.createRef()
formRef.current.setFieldsValue({
	username: 'name',
})
//class组件
//在Form中添加属性ref={this.formRef}
formRef = React.createRef()
this.formRef.current.setFieldsValue({
	username: 'name',
})

用这个方法可以获取表单中的值

//函数组件
//在Form中添加属性ref={formRef}
const formRef = React.createRef()
const form = formRef.current // 使用 getFieldsValue 获取多个字段值 
const values = form.getFieldsValue(['name','age']) 
console.log(values)
//class组件
//在Form中添加属性ref={this.formRef}
formRef = React.createRef()
const form = this.formRef.current // 使用 getFieldsValue 获取多个字段值 
const values = form.getFieldsValue(['name','age']) 
console.log(values)