ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3k stars 610 forks source link

[Bug] Add InputItem ref #1309

Closed ValyaBabenkov closed 10 months ago

ValyaBabenkov commented 10 months ago

💬 Before You Start

🙋 Description/Step to reproduce

Good afternoon.

Could you please tell me how to add a link to InputItem ref. I tried it like this, but it returns undefined

Component Input

export interface InputProps extends InputItemProps, Omit<TextInputProps, "onBlur"| "onChange"|"onFocus">{
    className?: string
    leftComponent?: ReactNode
    rightComponent?: ReactNode
}
export const Input = memo(({...props}:InputProps) => {
    return <View className={props.className}>
        {props.leftComponent}
        <InputItem
            {...props}
        />
        {props.rightComponent}
    </View>
});
Input.displayName = 'Input'

Used

const usernameRef = useRef<InputProps>();
<Input
      ref={usernameRef}
      returnKeyType="next"
      onSubmitEditing={() => {
          console.log("usernameRef?.current2", usernameRef)
      }}
      type={'email-address'}
      placeholder={'Email'}
      value={'valya_babenkov@mail.ru'}
      className={'pr-0 my-2'}
  />

Thanks

💻 Environment

iOS, Android

⚫️ Output of npx react-native info

"@ant-design/icons-react-native": "^2.3.2", "@ant-design/react-native": "^5.0.4", "react": "18.1.0", "react-native": "0.70.10",

System: OS: macOS 12.6.1 CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz Memory: 214.60 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.2.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.2.0 - /usr/local/bin/npm Watchman: 2022.11.28.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.1/14B47b - /usr/bin/xcodebuild Languages: Java: 19.0.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.10 => 0.70.10 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Additional comments

No response

1uokun commented 10 months ago

use React.forwardRef

export const Input = React.memo(
  React.forwardRef(({ ... props }: InputProps, ref: any) => {
    return <View className={props.className}>
        {props.leftComponent}
        <InputItem
            {... props}
            ref={ref} // add
        />
        {props.rightComponent}
    </View>
  }),
 )