Question

我在事件执行时将状态设置为子组件，并希望将此状态发送给父组件。我在SO上搜索了此内容。但是仍然找不到任何方法。

假设我有一个父母组件家庭，并且有一个子组件用户。我正在 User 组件中执行一些事件，当时，我想将数据传递到 Home 组件。我该怎么办？

下面是我的代码：

/* Parent component */

import React, { Component } from 'react';
import User from './user';

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
           isReportSent: false
        }   
    }
    render(){
        <Switch>
           <Route exact path="/" component={User}/>
        </Switch>
    }
}

/* child component */
class User extends React.Component{
    constructor(props){
        super(props)
    }
    render(){

    }
}

注意：我的父组件是“路由”组件，在其中我要在特定路径上路由我的子组件。因此不能将任何函数传递给子组件。

Answer 1

类似的事情会起作用。我不确定下面的内容是否能100％正常工作，因为我刚刚写得很快，但是我的想法是将setState()作为道具从父母传递给孩子。因此，当子级从props调用setState时，它是父级组件中的设置状态。

 class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: []
    }
  }

  render () {
    <ChilComponent setState={this.setState} />
  }
}

const User = async ({ setState }) => {
  const receivedData = await getDataHowever(params)
  setState({
    data: receivedData
  })
  return (
  <p>Got data!</p>
  )
}

Answer 2

import React, { Component } from "react";
class Home extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    onChildAPICall = result => {
      console.log(result);
    };

    render() {
      return <User onAPICall={this.onChildAPICall} />;
    }
}

class User extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.API = "https://apicall";
   }

   makeAnAPICall = async () => {
     let result = await fetch(this.API);
     this.props.onAPICall(result);
   };

   render() {
     return <button onClick={this.makeAnAPICall}>API Call</button>;
   }
}

export default Home;

Answer 3

您可以从子组件中调用父级的回调函数，并且可以在父级中根据回调响应设置状态。

import React, { Component } from "react";

class Home extends Component {
    constructor(props) {
      super(props);
      this.state = { }
    }
    setStateOfParent= result => {
      this.setState({result : result});
    }

    render() {
      return <User setStateOfParent={this.setStateOfParent} />;
    }
}

class User extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.API = "https://apicall";
   }

   makeAnAPICall = async () => {
     let result = await fetch(this.API);
     this.props.setStateOfParent(result);
   };

   render() {
     return <button onClick={this.makeAnAPICall}>API Call</button>;
   }
}

export default Home;

Answer 4

您的解释并不清楚您要实现的目标，但是作为一种简单的模式，您可以使用react router的render方法将回调prop传递给子组件

父组件

<Route exact path="/" render={(props) => <User {...props} callback={this.callback} />}/>

儿童班

this.props.callback(data)

Answer 5

@user10742206 最好的方法是创建一个独立的组件并将其作为子组件包含在任何父组件中。然后你可以从父级传递一个回调函数，子级可以使用它向父级发送任何数据。

从React JS中的子组件更新父组件状态

5 个答案: