React.js-将状态值从一个组件传递到另一个

问题描述

我有两个组件SideNav和Dashboard（两个位于不同的js文件中）。 SideNav将具有选择框作为过滤器。我必须将一个数组从仪表板组件传递到补充工具栏组件。这个数组必须作为选择框的值（在sidenav组件内部）。

I have two components SideNav and Dashboard (two are in different js files). SideNav will have selectbox as filters. I have to pass an array from Dashboard component to Sidebar component. This array has to given as values for select box (which is inside sidenav component).

PS 如果我有两个，那会是什么情况？在两个不同的JS文件中定义的不同组件类。
例如HomeComponent / Home.js->父组件
仪表板/Dashboard.js->子组件
我正在对 Home.js文件进行API调用并获取一些数据。我想将这些数据传递到 Dashboard.js文件（组件）
我研究的所有示例均在同一JS文件中显示了两个组件。

P.S. What will be the case if I have two different component classes defined in two different JS files.e.g. HomeComponent/Home.js -> Parent componentDashboard/Dashboard.js -> Child componentI am making API call on "Home.js" file and getting some data. I want to pass these data to "Dashboard.js" file (component)All the examples I studied, they show two components in the same JS file.

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state  = {viz:{},filterData:{}};
  }
  var data1= ['1','2','3'];
  this.setState({data1: data1}, function () {
     console.log(this.state.data1);
  });

 }

//Sidebar

class Sidebar extends Component {

   constructor(props) {
     super(props);
     this.state  = {
       data: ['opt1','opt2']
     };
   }

  handleClick(e) {
    e.preventDefault();
    e.target.parentElement.classList.toggle('open');
    this.setState({data: this.state.data1}, function () {
      console.log(this.state.data);
    });
  }

  render() {

    const props = this.props;
    const handleClick = this.handleClick;

    return (
      <div className="sidebar">
        <nav className="sidebar-nav">
          <Nav>
            <li className="nav-item nav-dropdown">
              <p className="nav-link nav-dropdown-toggle" onClick={handleClick.bind(this)}>Global</p>
              <ul className="nav-dropdown-items">
              <li> Organization <br/>
               <select className="form-control">
                <option value="">Select </option>
                {this.state.data.map(function (option,key) {
                   return <option key={key}>{option}</option>;
                 })}
               </select>

推荐答案

如果您必须将状态从仪表板传递到侧边栏，则必须从仪表板的渲染功能中渲染侧边栏。在这里，您可以传递仪表板的状态到Sideba r。

If you have to pass state from Dashboard to Sidebar, you have to render Sidebar from Dashboard's render function. Here, you can pass the state of Dashboard to Sidebar.

代码段

class Dashboard extends Component {
...
...
  render(){
    return(
    <Sidebar data={this.state.data1}/>
    );
  }
}

如果要更改道具（data1）传递到Sidebar并由Dashboard接收，则需要提升状态。也就是说，您必须将功能参考从仪表板传递到补充工具栏。在补充工具栏中，无论何时要将data1传递回仪表板，都必须调用它。
代码段。

If you want the changes made on props (data1) passed to Sidebar be received by Dashboard, you need to lift the state up. i.e, You have to pass a function reference from Dashboard to Sidebar. In Sidebar, you have to invoke it whenever you want the data1 to be passed back to Dashboard.Code snippet.

class Dashboard extends Component {
  constructor(props){
    ...
    //following is not required if u are using => functions in ES6.
    this.onData1Changed = this.onData1Changed.bind(this);
  }
  ...
  ...
  onData1Changed(newData1){
    this.setState({data1 : newData1}, ()=>{
      console.log('Data 1 changed by Sidebar');
    })
  }

  render(){
    return(
    <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/>
    );
  }
}

class Sidebar extends Component {
  ...
  //whenever data1 change needs to be sent to Dashboard
  //note: data1 is a variable available with the changed data
  this.props.onData1changed(data1);
}

参考文档：

这篇关于React.js-将状态值从一个组件传递到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！