首页 > 网络编程 > JavaScript > javascript类库 > React > react中form.setFieldvalue数据回填

react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法

2023-07-18 14:39:05 作者：刘小蟲_

这篇文章主要介绍了react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

react中form.setFieldvalue数据回填时 value和text不对应的问题

react中进入表单的编辑页面时需要将之前新建的数据回填，如果是{}的形式需要一一对应，如果是[]的形式需要单独的值意思是不接受数组对象也就是[{},{},{}]的形式解决方法：借用对象，用key去找value

// 进入编辑页面 多选框的回填（转换为对象的形式，用key来找value）
let reversedynamicDataObj = {};
let result = [];
Data.relatedProjects.map((i) => {
         JSON.stringify(i.id)
         .split(',')
         .map((ele) => {
     			reversedynamicDataObj[ele] = {
                      value: { name: i.name, id: ele },
                      key: ele,
                 };
        		result.push(reversedynamicDataObj[ele]['key']);
           });
});
Data.relatedProjectIds = result;
form.setFieldsValue(Data);

在react中对自己的组件使用setFieldsValue

setFieldsValue的用法

setFieldsValue是antd form的一个api，其作用是对指定的已使用from包裹的表单进行value设置。那么所以它的功能也很简单，那就是给指定的input设置value。如下所示：

import React from "react";
import { Form, Input } from 'antd';
class TestForm extends React.Component {
  componentDidMount(){
    const { setFieldsValue } = this.props.form;
    // 这里就能实现指定表单设置value
	setTimeout(()=>{
		setFieldsValue({"username": "Tom"})
	},5000)
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form >
        <Form.Item>
          {getFieldDecorator('username', {})(<Input />)}
        </Form.Item>
      </Form>
    );
  }
}
export default Form.create()(TestForm)

问题

那么假如把

{getFieldDecorator('username', {})(<Input />)}

换成

{getFieldDecorator('username', {})(<TestInput />)}

setFieldsValue 设置的value去哪了？相信聪明的你一眼就看透了，自然是在TestInput上面。假如TestInput是我们自定义的组件，那么我们则可以在props中找value这个属性，那么假如我们的Input是自定义的input组件，我们可以这么写

import React from "react";
import { Input } from 'antd';
class TestInput extends React.Component {
	state = {
		value: ""
	}
	componentWillReceiveProps(nextProps){
		if(nextProps.value){
			this.setState({
				value: nextProps.value
			})
		}
	}
	render() {
	    return (
	      <div >
	          <Input value={this.state.value}/>
	      </div>
	    );
  	}
}
export default TestInput

这样，我们就能使用setFieldsValue设置自定义的组件了。

到此这篇关于react中form.setFieldvalue数据回填时 value和text不对应的问题的文章就介绍到这了,更多相关react中form.setFieldvalue数据回填内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法