0

Can I call a function in a different React component?

For example, 

--index.js--
<component1 />
<component2 />
---------------

When I click or input value to an element(such as a text input) in Component1, I want to focus on a button in Component2

Is it possible?

Okd
  • 55
  • 5

2 Answers2

1

You can pass parent props to both component. For example : 

class Parent {
  state = {
    fieldFocus: false
  }

  handleFocus = () => {
    this.setState({ focus: true });
  }

  render() {
   const { focus } = this.state;
   return (
     <>
      <component1 handleFocus={this.handleFocus} />
      <component2 isFocus={focus} />
     </> 
   )
  }
}

And in Component 1 :

class Component1 {
  render() {
    const { handleChange } = this.props;
    return <button onClick={handleChange} />
  }
}

Then in component2 you will be able to access isFocus props from parent and set it focused.

EDIT

In component2 : 

class Component1 {
  render() {
   const { isFocus } = this.props;
   return <input isFocus={isFocus} />
  }
}

then edit style depending on boolean isFocus

Antonin Mrchd
  • 656
  • 3
  • 9
  • 31
  • "Then in component2 you will be able to access isFocus props from parent and set it focused." - how? – Quentin Apr 15 '20 at 08:36
  • because you pass it to props in parent `isFocus`, then in component2 you can access it by `this.props.isFocus` as boolean – Antonin Mrchd Apr 15 '20 at 08:37
  • Reading props is trivial, that isn't what I was asking about. How do you set the element to be focused? What happens when the user clicks something different, causing the focus to be lost and then clicks the button which sets the `isFocus` prop to `true` again (given that it is *already* `true` because nothing has unset it) – Quentin Apr 15 '20 at 08:39
  • To set element focused you can use style, or lib like styled-components. Google is your friend. To unset focus, you can use props on parents for other actions, like clicking on other button, clicking in the DOM... – Antonin Mrchd Apr 15 '20 at 08:43
  • @Quentin To set focus on a specific element you can call the native `focus()` method on it. Using the example from Anton you'd need to use React's `componentDidUpdate` method to detect a change in the focus prop, then use ReactDom.findDOMNode / querySelector to obtain the DOM node, then finally call focus() on it. – Graham Apr 15 '20 at 08:49
  • @AntoninMrchd — You can't use CSS to give focus to an element. – Quentin Apr 15 '20 at 10:42
  • @Graham — OK, so say you do that when the `isFocus` prop changes to `true`. How do you deal with the user clicking something else which would remove the focus from the element in the DOM but leave the `isFocus` prop unchanged? Clicking on the button which sets `isFocus` to `true` wouldn't change it because it is already `true`. – Quentin Apr 15 '20 at 10:43
-1

If you need to call a static function, than it could be separated to just a function. So place this function to utils folder, and import it when you need it. If any state is involved, than passing down or external state management

Shruti Sharma
  • 1
  • 1