feat: input组件支持name属性 (#427)

* feat: input组件支持name属性

* feat: input组件支持ref属性获取input实例

* feat: 新增name属性的doc文档

* feat: 新增ref新特性支持获取input实例

src/packages/input/__test__/__snapshots__/input.spec.tsx.snap

@@ -4,8 +4,6 @@ exports[`input props test 1`] = `
 <div>
   <div
     class="nut-input nut-input-border  "
-    iconclassprefix="nut-icon"
-    iconfontclassname="nutui-iconfont"
   >
     <div
       class="nut-input-label "
@@ -26,6 +24,7 @@ exports[`input props test 1`] = `
         <input
           class="input-text"
           maxlength="9999"
+          name="text"
           placeholder="请输入文字"
           style="text-align: left;"
           type="text"

src/packages/input/__test__/input.spec.tsx

@@ -6,7 +6,12 @@ import Button from '@/packages/button'
 
 test('input props test', () => {
   const { container } = render(
-    <Input label="文本" placeholder="请输入文字" defaultValue="初始文本" />
+    <Input
+      name="text"
+      label="文本"
+      placeholder="请输入文字"
+      defaultValue="初始文本"
+    />
   )
   expect(container.querySelector('.label-string')?.innerHTML).toBe('文本')
   expect(container.querySelector('.input-text')).toHaveAttribute(
@@ -17,6 +22,7 @@ test('input props test', () => {
     'value',
     '初始文本'
   )
+  expect(container.querySelector('.input-text')).toHaveAttribute('name', 'text')
   expect(container.querySelector('.input-text')).toHaveAttribute('type', 'text')
   expect(container).toMatchSnapshot()
 })
@@ -48,6 +54,7 @@ test('disabled test', () => {
 test('textarea test', () => {
   const { container } = render(
     <Input
+      name="textarea"
       label="留言"
       placeholder="留言"
       type="textarea"
@@ -56,6 +63,10 @@ test('textarea test', () => {
       maxlength="50"
     />
   )
+  expect(container.querySelector('.input-text')).toHaveAttribute(
+    'name',
+    'textarea'
+  )
   expect(container.querySelector('.input-text')).toHaveAttribute(
     'maxlength',
     '50'
@@ -159,7 +170,7 @@ test('slotButton test', () => {
     />
   )
   expect(container.querySelector('.nut-button__warp')?.innerHTML).toBe(
-    '发送验证码'
+    '<div class="text">发送验证码</div>'
   )
 })
 

src/packages/input/demo.taro.tsx

@@ -159,6 +159,7 @@ const InputDemo = () => {
       <div className="demo" style={{ paddingBottom: '20px' }}>
         <h2>{translated.basic}</h2>
         <Input
+          name="text"
           label={translated.text}
           placeholder={translated.text}
           defaultValue={value}
@@ -169,29 +170,34 @@ const InputDemo = () => {
         />
         <h2>{translated.title1}</h2>
         <Input
+          name="text"
           label={translated.text}
           placeholder={translated.text}
           defaultValue={state.val1}
         />
         <Input
+          name="password"
           label={translated.password}
           placeholder={translated.password}
           defaultValue={state.password}
           type="password"
         />
         <Input
+          name="number"
           label={translated.number}
           placeholder={translated.number}
           defaultValue={state.number}
           type="number"
         />
         <Input
+          name="digit"
           label={translated.digit}
           placeholder={translated.digit}
           defaultValue={state.digit}
           type="digit"
         />
         <Input
+          name="tel"
           label={translated.tel}
           placeholder={translated.tel}
           defaultValue={state.tel}

src/packages/input/demo.tsx

@@ -160,6 +160,7 @@ const InputDemo = () => {
       <div className="demo" style={{ paddingBottom: '20px' }}>
         <h2>{translated.basic}</h2>
         <Input
+          name="text"
           label={translated.text}
           placeholder={translated.text}
           defaultValue={value}
@@ -170,29 +171,34 @@ const InputDemo = () => {
         />
         <h2>{translated.title1}</h2>
         <Input
+          name="text"
           label={translated.text}
           placeholder={translated.text}
           defaultValue={state.val1}
         />
         <Input
+          name="password"
           label={translated.password}
           placeholder={translated.password}
           defaultValue={state.password}
           type="password"
         />
         <Input
+          name="number"
           label={translated.number}
           placeholder={translated.number}
           defaultValue={state.number}
           type="number"
         />
         <Input
+          name="digit"
           label={translated.digit}
           placeholder={translated.digit}
           defaultValue={state.digit}
           type="digit"
         />
         <Input
+          name="tel"
           label={translated.tel}
           placeholder={translated.tel}
           defaultValue={state.tel}

src/packages/input/doc.en-US.md

@@ -22,7 +22,7 @@ const App = () => {
     const [value, UpdateValue] = useState('')
   return (
     <>
-      <Input label="Text" defaultValue={value} placeholder="Text" change={(val) => {
+      <Input name="text" label="Text" defaultValue={value} placeholder="Text" change={(val) => {
             UpdateValue(val)
           }}/>
     </>
@@ -50,29 +50,34 @@ const App = () => {
   return (
     <>
        <Input
+          name="text"
           label="Text" 
           placeholder="Text" 
           defaultValue={state.text}
         />
         <Input
+          name="password"
           label="Password" 
           placeholder="Password"
           defaultValue={state.password}
           type="password"
         />
         <Input
+          name="number"
           label="Number" 
           placeholder="Number"
           defaultValue={state.number}
           type="number"
         />
         <Input
+          name="digit"
           label="Digit" 
           placeholder="Digit"
           defaultValue={state.digit}
           type="digit"
         />
         <Input
+          name="tel"
           label="Tel" 
           placeholder="Tel"
           defaultValue={state.tel}
@@ -427,6 +432,8 @@ export default App;
 | ------------ | -------------------------------------- | -------------- | ------- |
 | defaultValue | Input value                   | String         | -       |
 | type         | Input type, support all native types and `textarea` `number` `digit` type    | String         | `text`  |
+| name`v1.3.10`  | Used for form submission to obtain data | String         | -       |
+| ref`v1.3.10`  | Used to obtain internal input instance ref | RefAttributes         | -       |
 | placeholder  | Placeholder when the input box is empty         | String         | -       |
 | label        | Left text                               | String         | -       |
 | labelClass  | Left text extra class name                      | String | -  |

src/packages/input/doc.md

@@ -24,7 +24,7 @@ const App = () => {
     const [value, UpdateValue] = useState('')
   return (
     <>
-      <Input label="文本" defaultValue={value}  placeholder="文本" change={(val) => {
+      <Input name="text" label="文本" defaultValue={value}  placeholder="文本" change={(val) => {
             UpdateValue(val)
           }}/>
     </>
@@ -53,29 +53,34 @@ const App = () => {
   return (
     <>
        <Input
+          name="text"
           label="文本" 
           placeholder="文本" 
           defaultValue={state.text}
         />
         <Input
+          name="password"
           label="密码" 
           placeholder="密码"
           defaultValue={state.password}
           type="password"
         />
         <Input
+          name="number"
           label="数字" 
           placeholder="数字"
           defaultValue={state.number}
           type="number"
         />
         <Input
+          name="digit"
           label="整数" 
           placeholder="整数"
           defaultValue={state.digit}
           type="digit"
         />
         <Input
+          name="tel"
           label="手机号" 
           placeholder="手机号"
           defaultValue={state.tel}
@@ -421,6 +426,8 @@ export default App;
 | ------------ | -------------------------------------- | -------------- | ------- |
 | defaultValue | 初始默认值                 | String         | -       |
 | type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`      | String         | `text`  |
+| name`v1.3.10`  | 组件名字，用于表单提交获取数据 | String         | -       |
+| ref`v1.3.10`  | 用于获取内部input实例ref | RefAttributes         | -       |
 | placeholder  | 输入框为空时占位符                           | String         | -       |
 | label        | 左侧文本                               | String         | -       |
 | labelClass`v1.2.1`  | 左侧文本额外类名                        | String | -  |

src/packages/input/doc.zh-TW.md

@@ -24,7 +24,7 @@ const App = () => {
     const [value, UpdateValue] = useState('')
   return (
     <>
-      <Input label="文本" defaultValue={value}  placeholder="文本" change={(val) => {
+      <Input name="text" label="文本" defaultValue={value}  placeholder="文本" change={(val) => {
             UpdateValue(val)
           }}/>
     </>
@@ -53,29 +53,34 @@ const App = () => {
   return (
     <>
        <Input
+          name="text"
           label="文本" 
           placeholder="文本" 
           defaultValue={state.text}
         />
         <Input
+          name="password"
           label="密码" 
           placeholder="密码"
           defaultValue={state.password}
           type="password"
         />
         <Input
+          name="number"
           label="数字" 
           placeholder="数字"
           defaultValue={state.number}
           type="number"
         />
         <Input
+          name="digit"
           label="整数" 
           placeholder="整数"
           defaultValue={state.digit}
           type="digit"
         />
         <Input
+          name="tel"
           label="手机号" 
           placeholder="手机号"
           defaultValue={state.tel}
@@ -421,6 +426,8 @@ export default App;
 | ------------ | -------------------------------------- | -------------- | ------- |
 | defaultValue | 初始默认值                  | String         | -       |
 | type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`      | String         | `text`  |
+| name`v1.3.10`  | 组件名字，用于表单提交获取数据 | String         | -       |
+| ref`v1.3.10`  | 用于获取内部input实例ref | RefAttributes         | -       |
 | placeholder  | 输入框为空时占位符                           | String         | -       |
 | label        | 左侧文本                               | String         | -       |
 | labelClass  | 左侧文本额外类名                        | String | -  |

src/packages/input/input.taro.tsx

@@ -8,6 +8,8 @@ import React, {
   useLayoutEffect,
   MouseEvent,
   HTMLInputTypeAttribute,
+  forwardRef,
+  useImperativeHandle,
 } from 'react'
 
 import { formatNumber } from './util'
@@ -30,6 +32,7 @@ export type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done'
 
 export interface InputProps extends IComponent {
   type: InputType
+  name: string
   defaultValue: any
   placeholder: string
   label: string
@@ -86,6 +89,7 @@ export interface InputProps extends IComponent {
 const defaultProps = {
   ...ComponentDefaults,
   type: 'text',
+  name: '',
   defaultValue: '',
   placeholder: '',
   label: '',
@@ -125,11 +129,12 @@ export const Input: FunctionComponent<
       React.HTMLAttributes<HTMLDivElement>,
       'onChange' | 'onBlur' | 'onFocus' | 'onClick'
     >
-> = (props) => {
+> = forwardRef((props, ref) => {
   const { locale } = useConfig()
   const {
     children,
     type,
+    name,
     defaultValue,
     placeholder,
     label,
@@ -218,6 +223,10 @@ export const Input: FunctionComponent<
     }
   }, [inputValue])
 
+  useImperativeHandle(ref, () => {
+    return inputRef.current
+  })
+
   const inputClass = useCallback(() => {
     const prefixCls = 'nut-input'
     return [
@@ -405,6 +414,7 @@ export const Input: FunctionComponent<
             >
               {type === 'textarea' ? (
                 <textarea
+                  name={name}
                   className="input-text"
                   ref={inputRef}
                   style={{
@@ -429,6 +439,7 @@ export const Input: FunctionComponent<
                 />
               ) : (
                 <input
+                  name={name}
                   className="input-text"
                   ref={inputRef}
                   style={{ textAlign: inputAlign }}
@@ -504,7 +515,7 @@ export const Input: FunctionComponent<
       )}
     </div>
   )
-}
+})
 
 Input.defaultProps = defaultProps
 Input.displayName = 'NutInput'

src/packages/input/input.tsx

@@ -8,6 +8,8 @@ import React, {
   useLayoutEffect,
   MouseEvent,
   HTMLInputTypeAttribute,
+  forwardRef,
+  useImperativeHandle,
 } from 'react'
 
 import { formatNumber } from './util'
@@ -30,6 +32,7 @@ export type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done'
 
 export interface InputProps extends IComponent {
   type: InputType
+  name: string
   defaultValue: any
   placeholder: string
   label: string
@@ -86,6 +89,7 @@ export interface InputProps extends IComponent {
 const defaultProps = {
   ...ComponentDefaults,
   type: 'text',
+  name: '',
   defaultValue: '',
   placeholder: '',
   label: '',
@@ -125,11 +129,12 @@ export const Input: FunctionComponent<
       React.HTMLAttributes<HTMLDivElement>,
       'onChange' | 'onBlur' | 'onFocus' | 'onClick'
     >
-> = (props) => {
+> = forwardRef((props, ref) => {
   const { locale } = useConfig()
   const {
     children,
     type,
+    name,
     defaultValue,
     placeholder,
     label,
@@ -218,6 +223,10 @@ export const Input: FunctionComponent<
     }
   }, [inputValue])
 
+  useImperativeHandle(ref, () => {
+    return inputRef.current
+  })
+
   const inputClass = useCallback(() => {
     const prefixCls = 'nut-input'
     return [
@@ -405,6 +414,7 @@ export const Input: FunctionComponent<
             >
               {type === 'textarea' ? (
                 <textarea
+                  name={name}
                   className="input-text"
                   ref={inputRef}
                   style={{
@@ -429,6 +439,7 @@ export const Input: FunctionComponent<
                 />
               ) : (
                 <input
+                  name={name}
                   className="input-text"
                   ref={inputRef}
                   style={{ textAlign: inputAlign }}
@@ -504,7 +515,7 @@ export const Input: FunctionComponent<
       )}
     </div>
   )
-}
+})
 
 Input.defaultProps = defaultProps
 Input.displayName = 'NutInput'