Skip to content

Commit fbec7d3

Browse files
xiaoyatongxiaoyatong
committed
feat(Textarea): 增加 ref 属性
1 parent 8ba6dfb commit fbec7d3

File tree

14 files changed

+258
-131
lines changed

14 files changed

+258
-131
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,17 @@ import { Input } from '@nutui/nutui-react'
148148
| onClear | Triggered when the clear button is clicked | `(value: string) => void` | `-` |
149149
| onClick | Triggered when the input container is clicked | `(value: MouseEvent<HTMLDivElement>) => void` | `-` |
150150

151+
### Ref
152+
153+
You can get Ref of Input.
154+
155+
| Event | Description | Arguments |
156+
| --- | --- | --- |
157+
| clear | clear the value of input | `-` |
158+
| focus | focus the input | `-` |
159+
| blur | blur the input | `-` |
160+
| get | get the input ref | `-` |
161+
151162
## Theming
152163

153164
### CSS Variables

‎src/packages/input/doc.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,17 @@ import { Input } from '@nutui/nutui-react'
151151

152152
此外还支持以下原生属性：`onCompositionStart` `onCompositionEnd`
153153

154+
### Ref
155+
156+
通过 ref 可以获取到 Input 实例并调用实例方法。
157+
158+
| 方法名 | 说明 | 参数 |
159+
| --- | --- | --- |
160+
| clear | 清除容器中的数据 | `-` |
161+
| focus | 使容器获取焦点 | `-` |
162+
| blur | 使容器失去焦点 | `-` |
163+
| get | 获取当前容器 | `-` |
164+
154165
## 主题定制
155166

156167
### 样式变量

‎src/packages/input/doc.taro.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,17 @@ import { Input } from '@nutui/nutui-react-taro'
151151

152152
此外还支持 Taro 中的 [Input 属性](https://docs.taro.zone/docs/components/forms/input/)
153153

154+
### Ref
155+
156+
通过 ref 可以获取到 Input 实例并调用实例方法。
157+
158+
| 方法名 | 说明 | 参数 |
159+
| --- | --- | --- |
160+
| clear | 清除容器中的数据 | `-` |
161+
| focus | 使容器获取焦点 | `-` |
162+
| blur | 使容器失去焦点 | `-` |
163+
| get | 获取当前容器 | `-` |
164+
154165
## 主题定制
155166

156167
### 样式变量

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,17 @@ import { Input } from '@nutui/nutui-react'
148148
| onClear | 点击清空按钮时触发 | `(value: string) => void` | `-` |
149149
| onClick | 点击 input 容器触发 | `(value: MouseEvent<HTMLDivElement>) => void` | `-` |
150150

151+
### Ref
152+
153+
通過 ref 可以獲取到 Input 實例並調用實例方法。
154+
155+
| 方法名 | 說明 | 參數 |
156+
| --- | --- | --- |
157+
| clear | 清除容器中的數據 | `-` |
158+
| focus | 使容器獲取焦點 | `-` |
159+
| blur | 使容器失去焦點 | `-` |
160+
| get | 獲取當前容器 | `-` |
161+
151162
## 主题定制
152163

153164
### 样式变量

‎src/packages/textarea/doc.en-US.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,17 @@ import { TextArea } from '@nutui/nutui-react'
9595
| onFocus | Triggered when focusing | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
9696
| onBlur | Triggered when out of focus | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
9797

98+
### Ref
99+
100+
You can get Ref of Textarea.
101+
102+
| Event | Description | Arguments |
103+
| --- | --- | --- |
104+
| clear | clear the value of textarea | `-` |
105+
| focus | focus the textarea | `-` |
106+
| blur | blur the textarea | `-` |
107+
| get | get the textarea ref | `-` |
108+
98109
## Theming
99110

100111
### CSS Variables

‎src/packages/textarea/doc.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,17 @@ import { TextArea } from '@nutui/nutui-react'
9595
| onFocus | 聚焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
9696
| onBlur | 失焦时触发 | `(event: FocusEvent<HTMLTextAreaElement>) => void` | `-` |
9797

98+
### Ref
99+
100+
通过 ref 可以获取到 Textarea 实例并调用实例方法。
101+
102+
| 方法名 | 说明 | 参数 |
103+
| --- | --- | --- |
104+
| clear | 清除容器中的数据 | `-` |
105+
| focus | 使容器获取焦点 | `-` |
106+
| blur | 使容器失去焦点 | `-` |
107+
| get | 获取当前容器 | `-` |
108+
98109
## 主题定制
99110

100111
### 样式变量

‎src/packages/textarea/doc.taro.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,17 @@ import { TextArea } from '@nutui/nutui-react-taro'
9595
| onFocus | 聚焦时触发 | `(event) => void` | `-` |
9696
| onBlur | 失焦时触发 | `(event) => void` | `-` |
9797

98+
### Ref
99+
100+
通过 ref 可以获取到 Textarea 实例并调用实例方法。
101+
102+
| 方法名 | 说明 | 参数 |
103+
| --- | --- | --- |
104+
| clear | 清除容器中的数据 | `-` |
105+
| focus | 使容器获取焦点 | `-` |
106+
| blur | 使容器失去焦点 | `-` |
107+
| get | 获取当前容器 | `-` |
108+
98109
## 主题定制
99110

100111
### 样式变量

‎src/packages/textarea/doc.zh-TW.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,17 @@ import { TextArea } from '@nutui/nutui-react'
9494
| onFocus | 聚焦時觸發 | `(event) => void` | `-` |
9595
| onBlur | 失焦時觸發 | `(event) => void` | `-` |
9696

97+
### Ref
98+
99+
通過 ref 可以獲取到 Textarea 實例並調用實例方法。
100+
101+
| 方法名 | 說明 | 參數 |
102+
| --- | --- | --- |
103+
| clear | 清除容器中的數據 | `-` |
104+
| focus | 使容器獲取焦點 | `-` |
105+
| blur | 使容器失去焦點 | `-` |
106+
| get | 獲取當前容器 | `-` |
107+
97108
## 主題定制
98109

99110
### 樣式變量

‎src/packages/textarea/textarea.taro.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FunctionComponent, useRef } from 'react'
1+
import React, { forwardRef, useRef, useImperativeHandle } from 'react'
22
import classNames from 'classnames'
33
import Taro from '@tarojs/taro'
44
import { BaseEventOrig, Textarea, View } from '@tarojs/components'
@@ -19,9 +19,7 @@ const defaultProps = {
1919
plain: false,
2020
status: 'default',
2121
} as TaroTextAreaProps
22-
export const TextArea: FunctionComponent<Partial<TaroTextAreaProps>> = (
23-
props
24-
) => {
22+
export const TextArea = forwardRef((props: Partial<TaroTextAreaProps>, ref) => {
2523
const { locale } = useConfig()
2624
const {
2725
className,
@@ -54,20 +52,21 @@ export const TextArea: FunctionComponent<Partial<TaroTextAreaProps>> = (
5452
return value
5553
}
5654

57-
const [inputValue, setInputValue] = usePropsValue<string>({
55+
const [innerValue, setInnerValue] = usePropsValue<string>({
5856
value,
5957
defaultValue,
6058
finalValue: format(defaultValue),
6159
onChange,
6260
})
61+
const textareaRef = useRef<HTMLTextAreaElement>(null)
6362

6463
const handleChange = (event: BaseEventOrig) => {
6564
const text = event?.detail?.value
6665
if (text) {
6766
const value = compositionRef.current ? text : format(text)
68-
setInputValue(value)
67+
setInnerValue(value)
6968
} else {
70-
setInputValue('')
69+
setInnerValue('')
7170
}
7271
}
7372

@@ -83,6 +82,23 @@ export const TextArea: FunctionComponent<Partial<TaroTextAreaProps>> = (
8382
onBlur?.(event)
8483
}
8584

85+
useImperativeHandle(ref, () => {
86+
return {
87+
clear: () => {
88+
setInnerValue('')
89+
},
90+
focus: () => {
91+
textareaRef.current?.focus()
92+
},
93+
blur: () => {
94+
textareaRef.current?.blur()
95+
},
96+
get nativeElement() {
97+
return textareaRef.current
98+
},
99+
}
100+
})
101+
86102
return (
87103
<>
88104
<View
@@ -101,6 +117,7 @@ export const TextArea: FunctionComponent<Partial<TaroTextAreaProps>> = (
101117
>
102118
<Textarea
103119
{...rest}
120+
ref={textareaRef}
104121
nativeProps={{
105122
style,
106123
readOnly,
@@ -118,7 +135,7 @@ export const TextArea: FunctionComponent<Partial<TaroTextAreaProps>> = (
118135
style={Taro.getEnv() === 'WEB' ? undefined : style}
119136
disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
120137
// @ts-ignore
121-
value={inputValue}
138+
value={innerValue}
122139
onInput={handleChange}
123140
onBlur={handleBlur}
124141
onFocus={handleFocus}
@@ -134,12 +151,12 @@ export const TextArea: FunctionComponent<Partial<TaroTextAreaProps>> = (
134151
[`${classPrefix}-limit-disabled`]: disabled,
135152
})}
136153
>
137-
{inputValue.length}/{maxLength < 0 ? 0 : maxLength}
154+
{innerValue.length}/{maxLength < 0 ? 0 : maxLength}
138155
</View>
139156
)}
140157
</View>
141158
</>
142159
)
143-
}
160+
})
144161

145162
TextArea.displayName = 'NutTextArea'

0 commit comments

Comments
 (0)