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”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。