feat(Form): 添加API对单个 field设置 value & ref参数的示例文档 (#592)

uiwjs · Mar 2, 2022 · 2430ae3 · 2430ae3
1 parent ee8ccd2
commit 2430ae3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/packages/react-form/README.md b/packages/react-form/README.md
@@ -35,6 +35,10 @@ function Demo() {
     console.log('getFieldValues', form.current.getFieldValues())
   }
 
+  const setFieldValue=()=>{
+    form.current.setFieldValue('name','UIW')
+  }
+
   return (
     <div>
       <Form
@@ -85,6 +89,7 @@ function Demo() {
       <Button type="primary" onClick={onSubmit} >submit</Button>
       <Button type="primary" onClick={resetForm}>resetForm</Button>
       <Button type="primary" onClick={getFieldValues}>getValues</Button>
+      <Button type="primary" onClick={setFieldValue}>setFieldValue</Button>
     </div>
   )
 }
@@ -679,9 +684,12 @@ ReactDOM.render(<Demo />, _mount_);
 | onChange | 表单发生改变回调函数 {`initial`, `current`}  | function({ initial, current }) | - |
 | onSubmitError | 调用 `onSubmit` 抛出的任何错误。从字段名称返回对象映射。  | function | - |
 | resetOnSubmit | 在 `onSubmit` 成功后将表单重置为其初始状态。| bool | `true` |
+| ref | 返回form各种内部函数,可用于主动触发事件 | Ref | - |
+
+
+#### fields
 
 ```js
-// => fields props
 {
   firstName: {
     initialValue: '王',
@@ -697,6 +705,22 @@ ReactDOM.render(<Demo />, _mount_);
 }
 ```
 
+#### ref
+
+```jsx
+  const form = useRef()
+  render(<Form ref={form}/>)
+```
+
+```js
+    form.current.onSubmit()                                   // 提交表单
+    form.current.resetForm()                                  // 重置form
+    const fieldValues = form.current.getFieldValues()         // 获取所有 field的 value对象
+    const error = form.current.getError()                     // 获取所有提交时验证错误
+    form.current.setFields({ /** [fieldName]: value **/  })   // 设置表单的值,覆盖 form所有 field的值
+    form.current.setFieldValue(fieldName, value)              // 对单个 field设置 value,如果 value为数组请自行深度拷贝后传值,以免破坏原数组
+```
+
 ## FormItem
 
 | 参数 | 说明 | 类型 | 默认值 |

diff --git a/packages/react-form/src/Form.tsx b/packages/react-form/src/Form.tsx
@@ -123,6 +123,7 @@ function Form<T>(
       getFieldValues: () => data.current,
       getError: () => data.errors,
       setFields: setFields,
+      setFieldValue: setFieldValue,
     }),
     [data],
   );
@@ -162,6 +163,11 @@ function Form<T>(
     setData(tempData);
   }
 
+  function setFieldValue<V>(fieldName: string, value: V) {
+    const tempData = { ...data, current: { ...data.current, [fieldName]: value } };
+    setData(tempData);
+  }
+
   function handleChange(
     name: string,
     validator: FormFieldsProps<T>['validator'],

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -125,7 +125,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
       trigger="focus"
       {...others}
       isOpen={innerIsOpen}
-      menu={<Card bodyStyle={{ padding: 0 }}>{newContent}</Card>}
+      menu={<Card bodyStyle={emptyOption === true ? { padding: 0 } : undefined}>{newContent}</Card>}
     >
       <div
         onMouseOver={() => renderSelectIcon('enter')}

diff --git a/packages/react-search-tree/src/index.tsx b/packages/react-search-tree/src/index.tsx
@@ -64,8 +64,9 @@ function SingeTree<V extends SearchTagInputOption>(props: Omit<TreeProps, 'onSel
   const [keys, keysSet] = useState<Array<string | number>>([]);
 
   useEffect(() => {
-    const key = props.values?.[0].key;
-    keysSet(key ? [key] : []);
+    const keys: Array<string | number> = [];
+    if (props.values?.length) keys[0] = props.values[0].key;
+    keysSet(keys);
   }, [props.values]);
 
   const onSelected = (_1: any, _2: any, isChecked: boolean, evn: TreeData) => {