react中滿足對自己的組件使用setFieldsValue

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

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設置自定義的組件了

使用Hooks使用setFieldsValue設置初始值無效

錯誤：

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

因為formConfigListValues在每次操作完表單時候要走一遍，但是導致了，審批狀態一直不會變（也就是操作審核狀態失效）；

正確：

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

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

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