reactjs - React 从嵌套元素中的另一个组件更新组件

问题描述

如何在 React js 中更新另一个组件？

我读了很多帖子，但我找不到我的案子。

我有 3 个反应类：包含我的两个反应组件的主类：

`反应组件A

反应组件 B

我想使用组件 B 更新组件 A 的状态。

更新 1/2

我正在尝试按照您建议的步骤操作，但我遇到了这个问题：

我在我的主类中定义了一个函数：

handleArticleUpdate(codice){
alert(codice);
//this.setState({codice_articolo: codice});
}

我正在尝试将它注入我的组件中：

<MainGrid onArticleChanged={this.handleArticleUpdate} />

但我收到错误：

TypeError：无法读取未定义的属性“handleArticleUpdate”

我也尝试绑定 this 但错误是一样的..

我的代码：

      import React, { Component, PureComponent } from 'react';
    import { NavLink } from 'reactstrap';
    import ReactDOM from 'react-dom';

    import {Form, TabPanel} from 'devextreme-react';
    import MainGrid from './components/MainGrid';

    import VisualizzatoreArticoli from './components/VisualizzatoreArticoli';
    import './App.css';

    const headerStyle ={
      border:'1px solid'
    }

    const contentStyle ={
      border: '1px solid'
    }

    const bodyStyle ={
      backgroundColor: '#999999'

}
//import { Loading } from '../../../theme- 
 sources/bootstrap4/components/loading';
  //import { CurrencyTypeProvider } from '../../../theme- 
  sources/bootstrap4/components/currency-type-provider';

    const URL = 'http://localhost:53139/api/randomData';

    //const URL = 'https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems';

    class App extends React.PureComponent {


     constructor(props) {
    super(props);
    this.state = {
      itemsHeader : [
        {
          title : 'a',

          badge: 'New'
        },
        {
          title : 'b',
          text : "1",
        },
        {
          title : 'c',
        },
      ],
      itemsContent : [
        {
          title : 'Righe',

          badge: 'New'
        },
        {
          title : 'b',
          text : "1",
        },
        {
          title : 'c',
        },
      ],
      codice_articolo :''
    }

this.handleArticleUpdate = this.handleArticleUpdate.bind(this);

  }


getInitialState(){
  return this.state.codice_articolo
}

handleArticleUpdate(codice){
  alert("");
//this.setState({codice_articolo: codice});
}



  render() {


    return (
<div style={bodyStyle}>

  <div style={headerStyle}>

        <TabPanel
          height = '300'
          items  = {this.state.itemsHeader}
          itemComponent = {function(itemData){

              switch(itemData.title){
                case "a":
                  return null
                break;
                case "b":
                return null
              break;
                case "c":
                return null
                break;


              }    
            } 
          }
          >

      </TabPanel>
  </div>
<br />
  <div  style={contentStyle}>
  <TabPanel
    height = '700'
    items  = {this.state.itemsContent}
    itemComponent = {function(itemData){

        switch(itemData.title){
          case "Righe":
            return <MainGrid onArticleChanged={this.handleArticleUpdate()} />
          break;
          case "b":
          return null
        break;
          case "c":
          return null
          break;


        }    
      } 
    }
    >

</TabPanel>
  </div>








  </div>


    );
      }
      }

     export default App;

更新 2/2

我认为我的问题是我的组件过于嵌套（它在组件 TabPanel 内）并且 handleArticleUpdate 在范围内不可见。

我试着只放

 <MainGrid onArticleChanged={this.handleArticleUpdate} />

在 render() 函数中，一切正常。

标签： reactjs

reactjs - React 从嵌套元素中的另一个组件更新组件

问题描述

解决方案

推荐阅读