react中滿足對(duì)自己的組件使用setFieldsValue

這篇文章主要介紹“react中滿足對(duì)自己的組件使用setFieldsValue”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“react中滿足對(duì)自己的組件使用setFieldsValue”文章能幫助大家解決問題。

react對(duì)自己的組件使用setFieldsValue

setFieldsValue的用法

setFieldsValue是antd form的一個(gè)api，其作用是對(duì)指定的已使用from包裹的表單進(jìn)行value設(shè)置。那么所以它的功能也很簡單，那就是給指定的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)

問題

那么假如把

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

換成

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

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

使用Hooks使用setFieldsValue設(shè)置初始值無效

錯(cuò)誤：

  useEffect(() => {
    if (formConfigListValues.length === 0) {
      form.resetFields();
      if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
    }
  }, [formConfigListValues, statusId]);

因?yàn)閒ormConfigListValues在每次操作完表單時(shí)候要走一遍，但是導(dǎo)致了，審批狀態(tài)一直不會(huì)變（也就是操作審核狀態(tài)失效）；

正確：

  useEffect(() => {
    if (formConfigListValues.length === 0) {
      form.resetFields();
    }
  }, [formConfigListValues]);
  
  useEffect(() => {
      if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
  }, [statusId]);

在hooks中使用setFieldsValue，還要注意寫代碼的順序和層級(jí)結(jié)構(gòu)（如：新加的setFieldsValue到底放在里邊還是外邊，放到外邊的話是否要注意，要放在resetFields所在useEffect的下邊）。

關(guān)于“react中滿足對(duì)自己的組件使用setFieldsValue”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。