react中如何對自己的組件使用setFieldsValue

更新時(shí)間：2023年03月11日 14:35:24 作者：checkMa

react中如何對自己的組件使用setFieldsValue問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react對自己的組件使用setFieldsValue

setFieldsValue的用法

setFieldsValue是antd form的一個(gè)api，其作用是對指定的已使用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，還要注意寫代碼的順序和層級結(jié)構(gòu)（如：新加的setFieldsValue到底放在里邊還是外邊，放到外邊的話是否要注意，要放在resetFields所在useEffect的下邊）。