feat: Add setFieldValue API (#453)

* feat: Set field value

* test: test case

* chore: fix compile

Author: zombieJ

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts']
+};

package.json

@@ -54,6 +54,8 @@
     "rc-util": "^5.8.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.0",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.135",

src/FieldContext.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import warning from 'rc-util/lib/warning';
+import * as React from 'react';
 import type { InternalFormInstance } from './interface';
 
 export const HOOK_MARK = 'RC_FORM_INTERNAL_HOOKS';
@@ -21,6 +21,7 @@ const Context = React.createContext<InternalFormInstance>({
   isFieldsValidating: warningFunc,
   resetFields: warningFunc,
   setFields: warningFunc,
+  setFieldValue: warningFunc,
   setFieldsValue: warningFunc,
   validateFields: warningFunc,
   submit: warningFunc,

src/interface.ts

@@ -236,6 +236,7 @@ export interface FormInstance<Values = any> {
   isFieldsValidating: (nameList: NamePath[]) => boolean;
   resetFields: (fields?: NamePath[]) => void;
   setFields: (fields: FieldData[]) => void;
+  setFieldValue: (name: NamePath, value: any) => void;
   setFieldsValue: (values: RecursivePartial<Values>) => void;
   validateFields: ValidateFields<Values>;
 

src/useForm.ts

@@ -91,6 +91,7 @@ export class FormStore {
     isFieldsValidating: this.isFieldsValidating,
     resetFields: this.resetFields,
     setFields: this.setFields,
+    setFieldValue: this.setFieldValue,
     setFieldsValue: this.setFieldsValue,
     validateFields: this.validateFields,
     submit: this.submit,
@@ -752,6 +753,15 @@ export class FormStore {
     this.notifyWatch();
   };
 
+  private setFieldValue = (name: NamePath, value: any) => {
+    this.setFields([
+      {
+        name,
+        value,
+      },
+    ]);
+  };
+
   private getDependencyChildrenFields = (rootNamePath: InternalNamePath): InternalNamePath[] => {
     const children: Set<FieldEntity> = new Set();
     const childrenFields: InternalNamePath[] = [];

tests/index.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
 import { mount } from 'enzyme';
 import { resetWarned } from 'rc-util/lib/warning';
+import React from 'react';
 import Form, { Field, useForm } from '../src';
-import InfoField, { Input } from './common/InfoField';
 import { changeValue, getField, matchError } from './common';
+import InfoField, { Input } from './common/InfoField';
 import timeout from './common/timeout';
 
 describe('Form.Basic', () => {
@@ -838,4 +838,46 @@ describe('Form.Basic', () => {
 
     expect(wrapper.find('input').prop('value')).toEqual('bamboo');
   });
+
+  it('setFieldValue', () => {
+    const formRef = React.createRef();
+
+    const Demo = () => (
+      <Form ref={formRef} initialValues={{ list: ['bamboo', 'little', 'light'] }}>
+        <Form.List name="list">
+          {fields =>
+            fields.map(field => (
+              <Field key={field.key} {...field}>
+                <Input />
+              </Field>
+            ))
+          }
+        </Form.List>
+
+        <Field name={['nest', 'target']} initialValue="nested">
+          <Input />
+        </Field>
+      </Form>
+    );
+
+    const wrapper = mount(<Demo />);
+    expect(wrapper.find('input').map(input => input.prop('value'))).toEqual([
+      'bamboo',
+      'little',
+      'light',
+      'nested',
+    ]);
+
+    // Set
+    formRef.current.setFieldValue(['list', 1], 'tiny');
+    formRef.current.setFieldValue(['nest', 'target'], 'match');
+    wrapper.update();
+
+    expect(wrapper.find('input').map(input => input.prop('value'))).toEqual([
+      'bamboo',
+      'tiny',
+      'light',
+      'match',
+    ]);
+  });
 });

tests/setupAfterEnv.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';