Reactjs 如何在一个组件中触发更改。从另一个组件_Reactjs

Reactjs 如何在一个组件中触发更改。从另一个组件

reactjs

Reactjs 如何在一个组件中触发更改。从另一个组件,reactjs,Reactjs,我的react应用程序有一个名为ListOfTenants的组件，它基本上是一个表，每行有一个单选按钮。每次选择一行时，我希望在顶部的导航栏中，应该有一个组件显示，您正在处理租户X 因此，ActiveTenant组件如下所示： import React, { Component } from "react"; import authAction from "../../redux/auth/actions"; class ActiveTenant extends Component { c

我的react应用程序有一个名为ListOfTenants的组件，它基本上是一个表，每行有一个单选按钮。每次选择一行时，我希望在顶部的导航栏中，应该有一个组件显示，您正在处理租户X

因此，ActiveTenant组件如下所示：

import React, { Component } from "react";
import authAction from "../../redux/auth/actions";

class ActiveTenant extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        You aaare using tenant:
        {this.state.activetenant}
      </div>
    );
  }
}

export default ActiveTenant;

import React, { Component } from "react";
import { Table, Radio } from "antd";
import { adalApiFetch } from "../../adalConfig";

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

  fetchData = () => {
    adalApiFetch(fetch, "/Tenant", {})
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          const results = responseJson.map(row => ({
            key: row.ClientId,
            ClientId: row.ClientId,
            ClientSecret: row.ClientSecret,
            Id: row.Id,
            SiteCollectionTestUrl: row.SiteCollectionTestUrl,
            TenantDomainUrl: row.TenantDomainUrl
          }));
          this.setState({ data: results });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this.fetchData();
  }

  render() {
    const columns = [
      {
        title: "Client Id",
        dataIndex: "ClientId",
        key: "ClientId"
      },
      {
        title: "Site Collection TestUrl",
        dataIndex: "SiteCollectionTestUrl",
        key: "SiteCollectionTestUrl"
      },
      {
        title: "Tenant DomainUrl",
        dataIndex: "TenantDomainUrl",
        key: "TenantDomainUrl"
      }
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(selectedRows[0].key);
      },
      getCheckboxProps: record => ({
        type: Radio
      })
    };

    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={this.state.data}
      />
    );
  }
}

export default ListTenants;

import React，{Component}来自“React”；
从“../../redux/auth/actions”导入authAction；
类ActiveTenant扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
您正在使用租户：
{this.state.activetenant}
);
}
}
导出默认活动租户；

listtenants组件如下所示：

import React, { Component } from "react";
import authAction from "../../redux/auth/actions";

class ActiveTenant extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        You aaare using tenant:
        {this.state.activetenant}
      </div>
    );
  }
}

export default ActiveTenant;

import React, { Component } from "react";
import { Table, Radio } from "antd";
import { adalApiFetch } from "../../adalConfig";

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

  fetchData = () => {
    adalApiFetch(fetch, "/Tenant", {})
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          const results = responseJson.map(row => ({
            key: row.ClientId,
            ClientId: row.ClientId,
            ClientSecret: row.ClientSecret,
            Id: row.Id,
            SiteCollectionTestUrl: row.SiteCollectionTestUrl,
            TenantDomainUrl: row.TenantDomainUrl
          }));
          this.setState({ data: results });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this.fetchData();
  }

  render() {
    const columns = [
      {
        title: "Client Id",
        dataIndex: "ClientId",
        key: "ClientId"
      },
      {
        title: "Site Collection TestUrl",
        dataIndex: "SiteCollectionTestUrl",
        key: "SiteCollectionTestUrl"
      },
      {
        title: "Tenant DomainUrl",
        dataIndex: "TenantDomainUrl",
        key: "TenantDomainUrl"
      }
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(selectedRows[0].key);
      },
      getCheckboxProps: record => ({
        type: Radio
      })
    };

    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={this.state.data}
      />
    );
  }
}

export default ListTenants;

import React，{Component}来自“React”；
从“antd”导入{Table，Radio}；
从“../../adalConfig”导入{adalApiFetch}”；
类ListTenants扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
fetchData=（）=>{
adalApiFetch（获取“/Tenant”，{}）
.then（response=>response.json（））
.然后（responseJson=>{
如果（！this.isCancelled）{
const results=responseJson.map（行=>({
关键字：row.ClientId，
ClientId:row.ClientId，
ClientSecret:row.ClientSecret，
Id:row.Id，
SiteCollectionTestUrl:row.SiteCollectionTestUrl，
TenantDomainUrl:row.TenantDomainUrl
}));
this.setState（{data:results}）；
}
})
.catch（错误=>{
控制台错误（error）；
});
};
componentDidMount（）{
这是fetchData（）；
}
render（）{
常量列=[
{
标题：“客户Id”，
数据索引：“ClientId”，
关键字：“ClientId”
},
{
标题：“网站集测试URL”，
数据索引：“SiteCollectionTestUrl”，
关键字：“SiteCollectionTestUrl”
},
{
标题：“租户域URL”，
数据索引：“租户维护URL”，
关键字：“租户维护URL”
}
];
//rowSelection对象表示需要进行行选择
常量行选择={
onChange：（selectedRowKeys，selectedRows）=>{
console.log（selectedRows[0].key）；
},
getCheckboxProps:record=>({
类型：收音机
})
};
返回(
);
}
}
导出默认列表租户；

和App.js（主要组件）

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“antd”导入{Layout}；
从“react throttle”导入{Debounce}；
从“反应窗口大小侦听器”导入WindowResizeListener；
从“样式化组件”导入{ThemeProvider}；
从“../../redux/auth/actions”导入authAction；
从“../../redux/app/actions”导入appActions；
从“./侧边栏/侧边栏”导入侧边栏；
从“./Topbar/Topbar”导入Topbar；
从“/AppRouter”导入AppRouter；
从“./../settings”导入{siteConfig}”；
从“../../settings/themes”导入主题；
从“../../settings”导入{ThemeSeconFig}”；
从“/commonStyle”导入AppHolder；
导入“/global.css”；
const{Content，Footer}=布局；
const{logout}=authAction；
const{toggleAll}=appActions；
导出类应用程序扩展组件{
render（）{
const{url}=this.props.match；
const{height}=this.props；
返回(
这是道具(
windowSize.windowWidth，
windowSize.windowHeight
)
}
/>
{siteConfig.footerText}
);
}
}
导出默认连接(
状态=>({
auth:state.auth，
高度：state.App.toJS（）.height
}),
{注销，toggleAll}
)（App）；

如何在OnChange事件上触发对ActiveTenant组件的更改

更新

索引（租户）

一个选项卡用于注册（表单），另一个选项卡是列表

import React, { Component } from '../../../../../Library/Caches/typescript/2.9/node_modules/@types/react';
import { Row, Col, Tabs } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import RegisterTenantForm2 from './registertenantform2';
import ListTenants from './listtenants';

export default class extends Component {
  render(){
    const { rowStyle, colStyle, gutter } = basicStyle;
    const TabPane = Tabs.TabPane;
    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
              <Tabs defaultActiveKey="1">
                <TabPane tab="Tenant Registration" key="1">
                          <Row style={rowStyle} gutter={gutter} justify="start">
                    <Col md={24} sm={24} xs={24} style={colStyle}>
                      <Box
                        title={<IntlMessages id="tabTitle.TenantRegistration" />}
                        subtitle={<IntlMessages id="pagesmalldescription.TenantRegistration" />}
                      >
                        <ContentHolder>
                            <RegisterTenantForm2 />
                        </ContentHolder>
                      </Box>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tab="Tenant List" key="2">
                  <ListTenants/>
                </TabPane>
              </Tabs>



      </LayoutWrapper>
      </div>
    );
  }
}

import React，{Component}来自“../../../../../../Library/Caches/typescript/2.9/node_modules/@types/React”；
从“antd”导入{Row，Col，Tabs}；
从“../../components/utility/PageHeader”导入PageHeader；
从“../../components/utility/Box”导入框；
从“../../components/utility/LayoutWrapper”导入LayoutWrapper；
从“../../components/utility/ContentHolder”导入ContentHolder；
从“../../settings/basicStyle”导入basicStyle；
从“../../components/utility/IntlMessages”导入IntlMessages；
从“./RegisterTenantForm2”导入RegisterTenantForm2；
从“/ListTenants”导入ListTenants；
导出默认类扩展组件{
render（）{
const{rowStyle，colStyle，gutter}=basicStyle；
const TabPane=Tabs.TabPane；
返回(
{}
);
}
}

以及approuter.js

import React, { Component } from "react";
import { Route } from "react-router-dom";
import asyncComponent from "../../helpers/AsyncFunc";

const routes = [
  {
    path: "",
    component: asyncComponent(() => import("../dashboard"))
  },
  {
    path: "TenantAdministration",
    component: asyncComponent(() => import("../RegisterTenant/index"))
  },
  {
    path: "SiteCollections",
    component: asyncComponent(() => import("../SiteCollections/index"))
  },
  {
    path: "PageTemplates",
    component: asyncComponent(() => import("../PageTemplates/index"))
  }
];

class AppRouter extends Component {
  render() {
    const { url, style } = this.props;
    return (
      <div style={style}>
        {routes.map(singleRoute => {
          const { path, exact, ...otherProps } = singleRoute;
          return (
            <Route
              exact={exact === false ? false : true}
              key={singleRoute.path}
              path={`${url}/${singleRoute.path}`}
              {...otherProps}
            />
          );
        })}
      </div>
    );
  }
}

export default AppRouter;

import React，{Component}来自“React”；
从“react router dom”导入{Route}；
从“../../helpers/AsyncFunc”导入异步组件；
常数路由=[
{
路径：“”，
组件：异步组件（（）=>导入（../dashboard”））
},
{
路径：“租户管理”，
组件：asyncComponent（（）=>import（“../RegisterTenant/index”））
},
{
路径：“站点集合”，
组件：asyncComponent（（）=>import（“../SiteCollections/index”））
},
{
路径：“页面模板”，
组件：asyncComponent（（）=>import（“../PageTemplates/index”））
}
];
等级认可
class ActiveTenants extends React.Component{
 constructor(props) {
    super(props)
  }

    render(){

     return(
      <h1>{this.props.activetenant}</h1>
     )

    }

}

class ListTenants extends React.Component{

constructor(props) {
     super(props)
}

listTenant(tenants){
    return tenants.map(t=>{
        return (
         <li data-name={t.name} id={t.id}  onClick={(e)=>{this.props.tenatClick(e)}}>{t.name}</li>
        )
    });

}

render(){

 return(
    <ul>
        {this.listTenant([
            {name:"Tenant one",id:1},
            {name:"Tenant two",id:2},
            {name:"Tenant three",id:3}
        ])}

    </ul>
  )
 }
}

class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        activetenant :"Default tenant"
    }
  }

 changeTenant(e){
    let ele=e.target;
        this.setState({
          activetenant:ele.getAttribute('data-name')
        });
 }

  render() {
    return (
      <div>
        <header>
            <ActiveTenants activetenant={this.state.activetenant} />
        </header>
                <div>
                        <ListTenants tenatClick={this.changeTenant.bind(this)} />               
                </div>
      </div>
    )
  }
}

ReactDOM.render(<Main />, document.querySelector("#app"));