如何在本机反应中以编程方式单击按钮

Question

i have tried couple of ways to figure out how to perform click event programmatically, i found that useRef can solve the problem. but i tried it doesn't seems to work for me. below is the code,

//declaration
const reff=useReff(null);

//button design

<Button
onPress={()=>{console.log('Pressed')}}
title="Press me"
ref={reff}
/>

//Triggering the event
reff.current.onPress();

its giving me an error "onPress is undefined". i have tried with onClick(),click(),press() nothing worked for me unfortunately.

can someone help me on this please..

Answer 1

import React, { useRef } from 'react';
import { Button, View } from 'react-native';

const App = () => {
  const btnRef = useRef();

  return (
    <View>
      <Button
        title="Ref"
        onPress={() => {
          console.info('Ref props', btnRef.current.props);
          btnRef.current.props.onPress();
          btnRef.current.props.onHandlePress();
        }}
      />
      <Button
        title="Click Me"
        ref={btnRef}
        onPress={() => console.log('onPress props called')}
        onHandlePress={() => console.log('Custom onHandlePress called')}
      />
    </View>
  );
};

export default App;

I'm using react native cli

"react": "16.13.1",
"react-native": "0.63.4"

I guess, whatever props that passed in Button component can be accessed by calling ref.current.props.anyprops , Good luck!

Answer 2

Try this once, you just need to set ref:

<Button id={buttonId}
  onClick={e => console.log(e.target)}
  ref={(ref) => { this.myButton = ref; }}
 
/> 

and then you can add this in your function:

yourFunction = () => {
  this.myButton.click()
}

Hope it helps. feel free for doubts

Answer 3

This works for me:

  <Button
    onClick={() => console.log('pressed')}
    title="Press me"
    />

Just use the curly braces when you write the callback functions on multiple lines.