如何从一个组件调用函数到另一个组件？反应

Question

我在 react.js 工作。我创建了一个组件 Backend.jsx。我希望它作为一项服务（如 angular）工作，我可以在其中发送 API 请求。我想在其他一些组件中调用 Backend 的方法。

我在组件中调用了这个后端服务并尝试发送数据并使用 props 在 BackendService 中获取它。

但显然这行不通。

这是我的代码

在组件中：

这将在表单提交后调用。

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

在BackendService中：

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

关于如何在 component 中调用此 login 方法的任何建议。或任何其他让组件数据投入使用的建议。

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>
    )
  }
}

如何从一个组件调用函数到另一个组件？反应

How can I call a function from one component to another? React

javascript

instance

function-call

reactjs