react中如何对自己的组件使用setFieldsValue

 更新时间:2023年03月11日 14:35:24   作者:checkMa  
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 Native中添加自定义字体的方法详解

    在React Native中添加自定义字体的方法详解

    在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法,字体是优秀用户体验的基石,使用定制字体可以为你的应用程序提供独特的身份,需要的朋友可以参考下
    2024-02-02
  • React如何利用相对于根目录进行引用组件详解

    React如何利用相对于根目录进行引用组件详解

    这篇文章主要给大家介绍了关于React如何使用相对于根目录进行引用组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • React Hooks之useDeferredValue钩子用法示例详解

    React Hooks之useDeferredValue钩子用法示例详解

    useDeferredValue钩子的主要目的是在React的并发模式中提供更流畅的用户体验,特别是在有高优先级和低优先级更新的情况下,本文主要讲解一些常见的使用场景及其示例
    2023-09-09
  • React.InputHTMLAttributes实践和注意事项

    React.InputHTMLAttributes实践和注意事项

    文章讨论了如何在封装组件中使用React.InputHTMLAttributes,以及如何通过 {...inputProps} 动态传递属性,最后,文章总结了使用React.InputHTMLAttributes的最佳实践和注意事项,感兴趣的朋友一起看看吧
    2024-11-11
  • 在react配置使用less的完美方案

    在react配置使用less的完美方案

    由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下
    2024-04-04
  • Rect Intersection判断两个矩形是否相交

    Rect Intersection判断两个矩形是否相交

    这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • React实现双向绑定示例代码

    React实现双向绑定示例代码

    这篇文章给大家介绍了在React中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。
    2016-09-09
  • 如何强制刷新react hooks组件

    如何强制刷新react hooks组件

    这篇文章主要介绍了如何强制刷新react hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 从零开始学习搭建React脚手架项目

    从零开始学习搭建React脚手架项目

    这篇文章主要介绍了从零开始学习搭建React脚手架项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React的生命周期详解

    React的生命周期详解

    React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06

最新评论