Reactjs - 将状态值从一个组件传递到另一个组件

我有两个组件SideNav和仪表板（两个在不同的js文件中）。 SideNav将有选择框作为过滤器。我必须将数组从Dashboard组件传递到Sidebar组件。该数组必须作为选择框（位于sidenav组件内）的值给出。Reactjs - 将状态值从一个组件传递到另一个组件

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>

来源

2017-09-26 sudhashree

你能分享一些代码？ – mersocarlin

一个更好的方法是提升状态，然后将其作为道具传递给组件 –

Shubham Khatri：提升状态？你可以解释清楚 – sudhashree

如果您必须将状态从仪表板传递到补充工具栏，则必须从Dashboard的渲染功能呈现补充工具栏。在这里，您可以将仪表板的状态传递给补充工具栏。

代码片断

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

如果你想传递给侧栏通过仪表板接收道具（数据1）所做的更改，需要提起的状态了。即，您必须将仪表板的函数引用传递给补充工具栏。在补充工具栏中，只需要将data1传回仪表板，就必须调用它。代码片段。

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); 
}

参考文档：https://facebook.github.io/react/docs/lifting-state-up.html

来源

2017-09-26 14:05:08 Sri

谢谢！有效。 – sudhashree

只能从父传道具子组件。要么重构组件层次结构以实现这种依赖关系，要么使用像Redux这样的状态/事件管理系统（react-redux）。

来源

2017-09-26 13:32:30 JulienD

Reactjs - 将状态值从一个组件传递到另一个组件

回答

相关问题