Question

我正在使用react.js。我已经创建了一个组件Backend.jsx。我希望它能作为一种服务（像在angular中一样）在其中发送API请求。我想在其他一些组件中调用Backend的方法。

我在组件中调用了此后端服务，并尝试使用道具发送数据并在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);
};

任何建议如何在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>
    )
  }
}

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

1 个答案: