快捷導(dǎo)航

react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問(wèn)題及解決方法

更新時(shí)間：2023年07月18日 14:39:05 作者：劉小蟲(chóng)_

這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問(wèn)題及解決方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問(wèn)題

react中進(jìn)入表單的編輯頁(yè)面時(shí) 需要將之前新建的數(shù)據(jù)回填，如果是{}的形式需要一一對(duì)應(yīng)，如果是[]的形式需要單獨(dú)的值意思是不接受數(shù)組對(duì)象也就是[{},{},{}]的形式解決方法：借用對(duì)象，用key去找value

// 進(jìn)入編輯頁(yè)面 多選框的回填（轉(zhuǎn)換為對(duì)象的形式，用key來(lái)找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中對(duì)自己的組件使用setFieldsValue

setFieldsValue的用法

setFieldsValue是antd form的一個(gè)api，其作用是對(duì)指定的已使用from包裹的表單進(jìn)行value設(shè)置。那么所以它的功能也很簡(jiǎn)單，那就是給指定的input設(shè)置value。如下所示：

import React from "react";
import { Form, Input } from 'antd';
class TestForm extends React.Component {
  componentDidMount(){
    const { setFieldsValue } = this.props.form;
    // 這里就能實(shí)現(xiàn)指定表單設(shè)置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)

問(wèn)題

那么假如把

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

換成

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

setFieldsValue 設(shè)置的value去哪了？相信聰明的你一眼就看透了，自然是在TestInput上面。假如TestInput是我們自定義的組件，那么我們則可以在props中找value這個(gè)屬性，那么假如我們的Input是自定義的input組件，我們可以這么寫(xiě)

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設(shè)置自定義的組件了。

到此這篇關(guān)于react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問(wèn)題的文章就介紹到這了,更多相關(guān)react中form.setFieldvalue數(shù)據(jù)回填內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: