)
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(
{
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(
- '发送验证码'
+ '
'
)
})
diff --git a/src/packages/input/demo.taro.tsx b/src/packages/input/demo.taro.tsx
index c2fb020..967d919 100644
--- a/src/packages/input/demo.taro.tsx
+++ b/src/packages/input/demo.taro.tsx
@@ -159,6 +159,7 @@ const InputDemo = () => {
{translated.basic}
{
/>
{translated.title1}
{
{translated.basic}
{
/>
{translated.title1}
{
const [value, UpdateValue] = useState('')
return (
<>
- {
+ {
UpdateValue(val)
}}/>
>
@@ -50,29 +50,34 @@ const App = () => {
return (
<>
{
const [value, UpdateValue] = useState('')
return (
<>
- {
+ {
UpdateValue(val)
}}/>
>
@@ -53,29 +53,34 @@ const App = () => {
return (
<>
{
const [value, UpdateValue] = useState('')
return (
<>
- {
+ {
UpdateValue(val)
}}/>
>
@@ -53,29 +53,34 @@ const App = () => {
return (
<>
,
'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' ? (
) : (
)
-}
+})
Input.defaultProps = defaultProps
Input.displayName = 'NutInput'
diff --git a/src/packages/input/input.tsx b/src/packages/input/input.tsx
index 352eb80..cde46c2 100644
--- a/src/packages/input/input.tsx
+++ b/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,
'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' ? (
) : (
)
-}
+})
Input.defaultProps = defaultProps
Input.displayName = 'NutInput'
--
GitLab