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 - 將狀態值從一個組件傳遞到另一個組件

回答

相關問題