jdf2e · xiaoyatong · Feb 13, 2025 · Feb 10, 2025
diff --git a/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap b/src/packages/textarea/__test__/__snapshots__/textarea.spec.tsx.snap
@@ -6,15 +6,15 @@ exports[`textarea props test 1`] = `
     class="nut-textarea nut-textarea-container nut-textarea-default"
   >
     <textarea
-      class="nut-textarea-textarea "
+      class="nut-textarea-textarea"
       maxlength="20"
-      placeholder="请输入内容"
+      placeholder=""
       rows="2"
     >
       基础用法
     </textarea>
     <div
-      class="nut-textarea-limit "
+      class="nut-textarea-limit"
     >
       4
       /

diff --git a/src/packages/textarea/textarea.taro.tsx b/src/packages/textarea/textarea.taro.tsx
@@ -1,7 +1,13 @@
 import React, { FunctionComponent, useRef } from 'react'
 import classNames from 'classnames'
 import Taro from '@tarojs/taro'
-import { Textarea, TextareaProps, View, Text } from '@tarojs/components'
+import {
+  BaseEventOrig,
+  Text,
+  Textarea,
+  TextareaProps,
+  View,
+} from '@tarojs/components'
 import { useConfig, useRtl } from '@/packages/configprovider/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
@@ -21,8 +27,8 @@ export interface TextAreaProps
   plain: boolean
   status: 'error' | 'default'
   onChange: (value: string) => void
-  onBlur: (event: Event) => void
-  onFocus: (event: Event) => void
+  onBlur: (event: BaseEventOrig) => void
+  onFocus: (event: BaseEventOrig) => void
 }
 
 const defaultProps = {
@@ -77,7 +83,7 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     onChange,
   })
 
-  const handleChange = (event: any) => {
+  const handleChange = (event: BaseEventOrig) => {
     const text = event?.detail?.value
     if (text) {
       const value = compositionRef.current ? text : format(text)
@@ -87,32 +93,36 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
     }
   }
 
-  const handleFocus = (event: Event) => {
-    if (disabled) return
-    if (readOnly) return
-    onFocus && onFocus(event)
+  const isDisabled = () => disabled || readOnly
+
+  const handleFocus = (event: BaseEventOrig) => {
+    if (isDisabled()) return
+    onFocus?.(event)
   }
 
-  const handleBlur = (event: Event) => {
-    if (disabled) return
-    if (readOnly) return
-    onBlur && onBlur(event)
+  const handleBlur = (event: BaseEventOrig) => {
+    if (isDisabled()) return
+    onBlur?.(event)
   }
 
   return (
     <>
       <View
         className={classNames(
           classPrefix,
-          disabled ? `${classPrefix}-disabled` : '',
-          readOnly ? `${classPrefix}-readonly` : '',
-          rtl ? `${classPrefix}-rtl` : '',
-          plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
-          status ? `${classPrefix}-${status}` : '',
+          {
+            [`${classPrefix}-disabled`]: disabled,
+            [`${classPrefix}-readonly`]: readOnly,
+            [`${classPrefix}-rtl`]: rtl,
+            [`${classPrefix}-plain`]: plain,
+            [`${classPrefix}-container`]: !plain,
+            [`${classPrefix}-${status}`]: status,
+          },
           className
         )}
       >
         <Textarea
+          {...rest}
           nativeProps={{
             style,
             readOnly,
@@ -124,22 +134,27 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
               compositionRef.current = false
             },
           }}
-          className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
+          className={classNames(`${classPrefix}-textarea`, {
+            [`${classPrefix}-textarea-disabled`]: disabled,
+          })}
           style={Taro.getEnv() === 'WEB' ? undefined : style}
           disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
           // @ts-ignore
           value={inputValue}
-          onInput={(e: any) => handleChange(e)}
-          onBlur={(e: any) => handleBlur(e)}
-          onFocus={(e: any) => handleFocus(e)}
+          onInput={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
           autoHeight={autoSize}
           maxlength={maxLength}
-          placeholder={placeholder || locale.placeholder}
-          {...rest}
+          placeholder={
+            placeholder !== undefined ? placeholder : locale.placeholder
+          }
         />
         {showCount && (
           <Text
-            className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
+            className={classNames(`${classPrefix}-limit`, {
+              [`${classPrefix}-limit-disabled`]: disabled,
+            })}
           >
             {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
           </Text>

diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx
@@ -1,5 +1,5 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react'
 import type { ChangeEvent, FocusEvent } from 'react'
+import React, { FunctionComponent, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { useConfig, useRtl } from '@/packages/configprovider'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -83,9 +83,7 @@ export const TextArea: FunctionComponent<
   })
 
   useEffect(() => {
-    if (autoSize) {
-      setContentHeight()
-    }
+    if (autoSize) setContentHeight()
   }, [autoSize, defaultValue, inputValue])
 
   const setContentHeight = () => {
@@ -105,41 +103,47 @@ export const TextArea: FunctionComponent<
     setInputValue(value)
   }
 
+  const isDisabled = () => disabled || readOnly
+
   const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
-    if (disabled) return
-    if (readOnly) return
-    onFocus && onFocus(event)
+    if (isDisabled()) return
+    onFocus?.(event)
   }
 
   const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-    if (disabled) return
-    if (readOnly) return
-    onBlur && onBlur(event)
+    if (isDisabled()) return
+    onBlur?.(event)
   }
 
   return (
     <>
       <div
         className={classNames(
           classPrefix,
-          disabled ? `${classPrefix}-disabled` : '',
-          readOnly ? `${classPrefix}-readonly` : '',
-          rtl ? `${classPrefix}-rtl` : '',
-          plain ? `${classPrefix}-plain` : `${classPrefix}-container`,
-          status ? `${classPrefix}-${status}` : '',
+          {
+            [`${classPrefix}-disabled`]: disabled,
+            [`${classPrefix}-readonly`]: readOnly,
+            [`${classPrefix}-rtl`]: rtl,
+            [`${classPrefix}-plain`]: plain,
+            [`${classPrefix}-container`]: !plain,
+            [`${classPrefix}-${status}`]: status,
+          },
           className
         )}
       >
         <textarea
+          {...rest}
           ref={textareaRef}
-          className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
+          className={classNames(`${classPrefix}-textarea`, {
+            [`${classPrefix}-textarea-disabled`]: disabled,
+          })}
           style={style}
           disabled={disabled}
           readOnly={readOnly}
           value={inputValue}
-          onChange={(e) => handleChange(e)}
-          onBlur={(e) => handleBlur(e)}
-          onFocus={(e) => handleFocus(e)}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
           onCompositionEnd={() => {
             compositionRef.current = false
           }}
@@ -148,12 +152,15 @@ export const TextArea: FunctionComponent<
           }}
           rows={rows}
           maxLength={maxLength === -1 ? undefined : maxLength}
-          placeholder={placeholder || locale.placeholder}
-          {...rest}
+          placeholder={
+            placeholder !== undefined ? placeholder : locale.placeholder
+          }
         />
         {showCount && (
           <div
-            className={`${classPrefix}-limit ${disabled ? `${classPrefix}-limit-disabled` : ''}`}
+            className={classNames(`${classPrefix}-limit`, {
+              [`${classPrefix}-limit-disabled`]: disabled,
+            })}
           >
             {inputValue.length}/{maxLength < 0 ? 0 : maxLength}
           </div>