feat(react): 小程序表单组件支持defaultValue 属性

NervJS · Dec 28, 2023 · 2375433 · 2375433
1 parent f608b54
commit 2375433
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 3 deletions.
diff --git a/packages/taro-components/types/Checkbox.d.ts b/packages/taro-components/types/Checkbox.d.ts
@@ -15,6 +15,10 @@ interface CheckboxProps extends StandardProps {
    * @default false
    */
   checked?: boolean
+  /** 设置在 React 非受控状态下，当前是否选中
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   */
+  defaultChecked?: boolean
   /** checkbox的颜色，同 css 的 color
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */

diff --git a/packages/taro-components/types/Input.d.ts b/packages/taro-components/types/Input.d.ts
@@ -5,6 +5,10 @@ interface InputProps extends StandardProps, FormItemProps {
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   value?: string
+  /** 设置 React 非受控输入框的初始内容
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   */
+  defaultValue?: string
   /** input 的类型
    * @default "text"
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn

diff --git a/packages/taro-components/types/Picker.d.ts b/packages/taro-components/types/Picker.d.ts
@@ -61,6 +61,10 @@ interface PickerSelectorProps extends PickerStandardProps {
    * @default 0
    */
   value?: number
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn
+   */
+  defaultValue?: number
   /**
    * mode为 selector 或 multiSelector 时 itemStyle 有效
    * @supported rn
@@ -77,7 +81,7 @@ interface PickerSelectorProps extends PickerStandardProps {
    * value 改变时触发 change 事件
    * @supported weapp, h5, rn
    */
-  onChange: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>
+  onChange?: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>
   /**
    * 用于替换组件内部文本
    * @supported h5

diff --git a/packages/taro-components/types/PickerView.d.ts b/packages/taro-components/types/PickerView.d.ts
@@ -5,6 +5,10 @@ interface PickerViewProps extends StandardProps {
    * @supported weapp, alipay, swan, tt, qq, jd, rn
    */
   value?: number[]
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, alipay, swan, tt, qq, jd, rn
+   */
+  defaultValue?: number[]
   /** 设置选择器中间选中框的样式
    * @supported weapp, alipay, swan, tt, qq, jd, rn
    */

diff --git a/packages/taro-components/types/Radio.d.ts b/packages/taro-components/types/Radio.d.ts
@@ -10,6 +10,10 @@ interface RadioProps extends StandardProps {
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   checked?: boolean
+  /** 设置在 React 非受控状态下，当前是否选中
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   */
+  defaultChecked?: boolean
   /** 是否禁用
    * @default false
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn

diff --git a/packages/taro-components/types/Slider.d.ts b/packages/taro-components/types/Slider.d.ts
@@ -26,6 +26,10 @@ interface SliderProps extends StandardProps, FormItemProps {
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   value?: number
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   */
+  defaultValue?: string
   /** 背景条的颜色（请使用 backgroundColor）
    * @default "#e9e9e9"
    * @supported weapp, tt, qq, jd

diff --git a/packages/taro-components/types/Switch.d.ts b/packages/taro-components/types/Switch.d.ts
@@ -6,6 +6,10 @@ interface SwitchProps extends StandardProps, FormItemProps {
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   checked?: boolean
+  /** 设置在 React 非受控状态下，当前是否选中
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   */
+  defaultChecked?: boolean
   /** 是否禁用
    * @default false
    * @supported weapp, alipay, swan, tt, qq, h5, rn

diff --git a/packages/taro-components/types/Textarea.d.ts b/packages/taro-components/types/Textarea.d.ts
@@ -5,6 +5,10 @@ interface TextareaProps extends StandardProps, FormItemProps {
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   value?: string
+  /** 设置 React 非受控输入框的初始内容
+   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
+   */
+  defaultValue?: string
   /** 输入框为空时占位符
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */

diff --git a/packages/taro-react/src/reconciler.ts b/packages/taro-react/src/reconciler.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/indent */
-import { document } from '@tarojs/runtime'
+import { document,FormElement } from '@tarojs/runtime'
 import { isBoolean, isUndefined, noop } from '@tarojs/shared'
 import Reconciler from 'react-reconciler'
 import { DefaultEventPriority } from 'react-reconciler/constants'
@@ -58,7 +58,16 @@ const hostConfig: HostConfig<
     parent.appendChild(child)
   },
   finalizeInitialChildren (dom, type: string, props: any) {
-    updateProps(dom, {}, props) // 提前执行更新属性操作，Taro 在 Page 初始化后会立即从 dom 读取必要信息
+    let newProps = props
+    if (dom instanceof FormElement) {
+      const [defaultName, defaultKey] = ['switch', 'checkbox', 'radio'].includes(type) ? ['checked', 'defaultChecked'] : ['value', 'defaultValue']
+      if (props.hasOwnProperty(defaultKey)) {
+        newProps = { ...newProps, [defaultName]: props[defaultKey] }
+        delete newProps[defaultKey]
+      }
+    }
+
+    updateProps(dom, {}, newProps) // 提前执行更新属性操作，Taro 在 Page 初始化后会立即从 dom 读取必要信息
 
     if (type === 'input' || type === 'textarea') {
       track(dom)