1
- import React , { useEffect , useState } from 'react' ;
1
+ import React , { useEffect , useState , PropsWithoutRef } from 'react' ;
2
2
import {
3
3
TextInput ,
4
4
TextInputProps ,
@@ -47,15 +47,15 @@ export interface InputProps extends TextInputProps {
47
47
/** 容器样式 */
48
48
containerStyle ?: StyleProp < ViewStyle > ;
49
49
/** 输入框 ref */
50
- inputRef ?: React . RefObject < TextInput > ;
50
+ inputRef ?: React . ForwardedRef < TextInput > ;
51
51
}
52
52
53
53
interface InputState {
54
54
value ?: string ;
55
55
control : 'props' | 'state' ;
56
56
}
57
57
58
- const Input = ( props : InputProps ) => {
58
+ const Input = React . forwardRef < TextInput , PropsWithoutRef < InputProps > > ( ( props , ref ) => {
59
59
const {
60
60
wrongfulHandle,
61
61
rule,
@@ -148,18 +148,30 @@ const Input = (props: InputProps) => {
148
148
style = { [ styles . container , { flex : 1 , borderColor : borderColor } , border ? styles [ border ] : { } ] }
149
149
testID = "RNE__Input__view"
150
150
>
151
- { typeof extraStart === 'string' ? < Text color = "primary_text" style = { { fontSize } } > { extraStart } </ Text > : extraStart }
151
+ { typeof extraStart === 'string' ? (
152
+ < Text color = "primary_text" style = { { fontSize } } >
153
+ { extraStart }
154
+ </ Text >
155
+ ) : (
156
+ extraStart
157
+ ) }
152
158
< TextInput
153
159
testID = "RNE__Input__input"
154
160
{ ...others }
155
- ref = { inputRef }
161
+ ref = { ref || inputRef }
156
162
editable = { ! disabled }
157
163
value = { defaultValue }
158
164
onChangeText = { onInputChange }
159
165
onFocus = { onInputFocus }
160
166
style = { [ { fontSize, color : theme . colors . text || '#000' } , styles . input , style ] }
161
167
/>
162
- { typeof extraEnd === 'string' ? < Text color = "primary_text" style = { { fontSize } } > { extraEnd } </ Text > : extraEnd }
168
+ { typeof extraEnd === 'string' ? (
169
+ < Text color = "primary_text" style = { { fontSize } } >
170
+ { extraEnd }
171
+ </ Text >
172
+ ) : (
173
+ extraEnd
174
+ ) }
163
175
{ error && ( renderError || < Icon name = "circle-close" color = "#dc3545" /> ) }
164
176
</ View >
165
177
{ clear && (
@@ -170,12 +182,16 @@ const Input = (props: InputProps) => {
170
182
onInputChange ?.( '' ) ;
171
183
} }
172
184
>
173
- { renderClear || < Text color = "primary_text" style = { [ { fontSize } , clearStyle ] } > 清除</ Text > }
185
+ { renderClear || (
186
+ < Text color = "primary_text" style = { [ { fontSize } , clearStyle ] } >
187
+ 清除
188
+ </ Text >
189
+ ) }
174
190
</ TouchableOpacity >
175
191
) }
176
192
</ View >
177
193
) ;
178
- } ;
194
+ } ) ;
179
195
export default Input ;
180
196
type CreStyle = {
181
197
bgColor : string ;
@@ -218,4 +234,4 @@ function createStyles({ bgColor }: CreStyle) {
218
234
color : '#f50' ,
219
235
} ,
220
236
} ) ;
221
- }
237
+ }
0 commit comments