1- import React , { useEffect , useState } from 'react' ;
1+ import React , { useEffect , useState , PropsWithoutRef } from 'react' ;
22import {
33 TextInput ,
44 TextInputProps ,
@@ -47,15 +47,15 @@ export interface InputProps extends TextInputProps {
4747 /** 容器样式 */
4848 containerStyle ?: StyleProp < ViewStyle > ;
4949 /** 输入框 ref */
50- inputRef ?: React . RefObject < TextInput > ;
50+ inputRef ?: React . ForwardedRef < TextInput > ;
5151}
5252
5353interface InputState {
5454 value ?: string ;
5555 control : 'props' | 'state' ;
5656}
5757
58- const Input = ( props : InputProps ) => {
58+ const Input = React . forwardRef < TextInput , PropsWithoutRef < InputProps > > ( ( props , ref ) => {
5959 const {
6060 wrongfulHandle,
6161 rule,
@@ -148,18 +148,30 @@ const Input = (props: InputProps) => {
148148 style = { [ styles . container , { flex : 1 , borderColor : borderColor } , border ? styles [ border ] : { } ] }
149149 testID = "RNE__Input__view"
150150 >
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+ ) }
152158 < TextInput
153159 testID = "RNE__Input__input"
154160 { ...others }
155- ref = { inputRef }
161+ ref = { ref || inputRef }
156162 editable = { ! disabled }
157163 value = { defaultValue }
158164 onChangeText = { onInputChange }
159165 onFocus = { onInputFocus }
160166 style = { [ { fontSize, color : theme . colors . text || '#000' } , styles . input , style ] }
161167 />
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+ ) }
163175 { error && ( renderError || < Icon name = "circle-close" color = "#dc3545" /> ) }
164176 </ View >
165177 { clear && (
@@ -170,12 +182,16 @@ const Input = (props: InputProps) => {
170182 onInputChange ?.( '' ) ;
171183 } }
172184 >
173- { renderClear || < Text color = "primary_text" style = { [ { fontSize } , clearStyle ] } > 清除</ Text > }
185+ { renderClear || (
186+ < Text color = "primary_text" style = { [ { fontSize } , clearStyle ] } >
187+ 清除
188+ </ Text >
189+ ) }
174190 </ TouchableOpacity >
175191 ) }
176192 </ View >
177193 ) ;
178- } ;
194+ } ) ;
179195export default Input ;
180196type CreStyle = {
181197 bgColor : string ;
@@ -218,4 +234,4 @@ function createStyles({ bgColor }: CreStyle) {
218234 color : '#f50' ,
219235 } ,
220236 } ) ;
221- }
237+ }
0 commit comments