Как я могу вызвать функцию из одного компонента в другой?реагировать

Question

Я работаю в Reaction.js.Я создал компонент Backend.jsx.Я хочу, чтобы он работал как сервис (как в angular), где я могу отправлять запросы API.Я хочу вызвать методы Backend в некоторых других компонентах.

Я вызвал эту внутреннюю службу в компоненте и попытался отправить данные и получить их в BackendService, используя реквизиты.

Но, очевидно,это не будет работать.

Вот мой код

В Компонент :

Это будет вызвано после отправки формы.

handleLoginSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.data);
    <BackendService onSendData = {this.state.data} />
}

In BackendService :

constructor(props) {
    super(props);
    this.state = {  }
    this.login(props)
}
login = (props) =>
{
    console.log('login', props);
};

Любые предложения, как я могу вызвать этот метод login в component.Или любое другое предложение, чтобы получить данные компонента в обслуживании.

Answer 1

Вы можете попробовать это:

1.Component.js

class Componet extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      data:"this state contain data"
    }

    this.backendServiceRef = React.createRef(); // Using this ref you can access method and state of backendService component.
  }

  render() {
    return (
      <div className="App">
        <button onClick={() => {

          this.backendServiceRef.current.login()  

       }}>click</button>

        <BackendService ref={this.backendServiceRef} onSendData = {this.state.data}></BackendService>
      </div>
    );
  }
}

export default Componet;  

2.BackendService.js

class BackendService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  login = (props) => {
    alert("login call")
  };

  render() {
    return (
      <div>
        Backend service component
      </div>
    )
  }
}