react的ui庫antd中form表單使用SelectTree反顯問題及解決

更新時(shí)間：2023年01月16日 16:58:01 作者：強(qiáng)哥?v5

這篇文章主要介紹了react的ui庫antd中form表單使用SelectTree反顯問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react ui庫antd中form表單使用SelectTree反顯問題

最近遇到這個(gè)問題，后來找到原因

1.formItem 需要使用initialValue賦值。

2.這個(gè)組件需要一開始就存在不能是條件渲染，非要用條件渲染需要讓它先顯示，然后根據(jù)條件讓它不顯示。

例子：

state={
?treeList:[],
?showTree:ture,
?value:[]
}
componentDidMount(){
? ?//這里請求數(shù)據(jù)用定時(shí)器代替
? ?setTimeOut(()=>{ ?//一般會(huì)先拿到listTree先渲染
? ? ? this.setState({
? ? ? ? treeList:[{value:'aaa',title:'你好react'}]
? ? ? })
? ? ? setTimeOut(()=>{ //第二次請求反顯的值和是否顯示
? ? ? ? ?if(需要顯示tree){ //下面?zhèn)z條if一般不會(huì)有同時(shí)出現(xiàn)的時(shí)候
? ? ? ? ? ? ?this.setState({
? ? ? ? ? ? ? ?value:['aaa'], ?
? ? ? ? ? ? ?})?
? ? ? ? ?}
? ? ? ? ?if(不需要顯示tree){
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ?showTree:false, ?
? ? ? ? ? ? ?})?
? ? ? ? ?}
? ? ? ??
? ? ? })
? ?},2000)
}
?render() {
? ? const {treeList,value,showTree}=this.state;
? ? const tProps = {
? ? ? treeData:treeList,
? ? ? value:value
? ? };
? ? return?
? ? <Form>
? ? ? <Form.Item>
? ? ? ? ? {getFieldDecorator('selectTree', {
? ? ? ? ? ? initialValue:[]
? ? ? ? ? })(
? ? ? ? ? ? ?{showTree&&<TreeSelect {...tProps} />}
? ? ? ? ? )}
? ? ? ? </Form.Item>
? ? ?</Form>
? ? ?
? }

react antd form表單回顯踩坑

需求如下

在彈窗里顯示一個(gè)表單，并進(jìn)行回顯，涉及到的組件有，簡單的input框，inputNumber框，select，此處前端懶得讓后端寫接口點(diǎn)擊自己獲取到form表單里的數(shù)據(jù)，方法也不難在鏈接處添加點(diǎn)擊事件代碼如下（簡單記錄）

onClick={() => this.getInformation(info)}
 
//此處是點(diǎn)擊事件的方法
getInformation = (info) => {
     //此處打印的東西見下圖
    //此處存在問題如果強(qiáng)制轉(zhuǎn)換了一次重復(fù)轉(zhuǎn)換會(huì)報(bào)錯(cuò) 參數(shù)undefined 
    if (
      typeof info.app == "string" &&
      typeof info.file == "string"
    ) 
     {
     console.log(info);
     //把select多選的類型強(qiáng)制轉(zhuǎn)成object類型并且賦值給原來的屬性
     var newObj1 = eval('('+info.app+')');
     var newObj = eval('('+info.file+')');
     info.file=newObj
     info.app=newObj1
    store.getInformation();
    //儲(chǔ)存到當(dāng)前state中
    this.setState({getInform:info})
    }else{
           this.setState({getInform:info}) 
    }
  };
 
 
 
//此處通過組件通信暴露給父組件
<Get putfile={this.state.getInform}/>
 
 
//父組件處接收參數(shù) 在render函數(shù)處接收
 const form = this.props["putfile"];

此處為上面log打印的東西

打印的數(shù)據(jù)格式都是string類型的，對(duì)于select的多選string類型的屬性當(dāng)然不滿足了，所以需要進(jìn)行數(shù)據(jù)處理

//此處添加了 回顯實(shí)例 此代碼antd版本為 3 必填校驗(yàn)已經(jīng)實(shí)現(xiàn)直接cv即可
 
//此處為input框
  <Form.Item
                label="應(yīng)用名稱"
                // hasFeedback
                required
              >
                {getFieldDecorator(
                  "name",
                  { initialValue: form["name"] },
                  {
                    rules: [{ required: true, message: "請輸入應(yīng)用名稱!" }],
                  }
                )(<Input placeholder="請輸入應(yīng)用名稱" />)}
              </Form.Item>
 
// 此處為number框
 
 <Form.Item label="金額" required>
                {getFieldDecorator(
                  "money",
                  { initialValue: form["money"] },
                  {
                    rules: [{ required: true, message: "請輸入應(yīng)用上架金額!" }],
                  }
                )(
                  <InputNumber
                    style={{ width: "100%" }}
                    min="0"
                    step="1"
                    precision="2"
                    placeholder="請輸入應(yīng)用上架金額"
                  />
                )}
              </Form.Item>
 
// 此處為select多選框 (此處未做必填校驗(yàn))
 
    <Col span={12}>
              <Form.Item label="文件類型" hasFeedback validateStatus="">
                {getFieldDecorator("file", {
                  initialValue: form["file"],
                })(
                  <Select
                    mode="tags"
                    style={{ width: "100%" }}
                    placeholder="請選擇文件類型"
                    onChange={this.handleChange}
                  >
                    {children}
                  </Select>
                )}
              </Form.Item>
            </Col>