React ES6 onClick更改其他組件

我正在構建一個具有普通行，然後是隱藏兩個行直到加上圖標被點擊的表。當圖標被點擊時，它應該變成一個減號，隱藏的行應該改變CSS類。也應該反向工作。React ES6 onClick更改其他組件

import React from 'react'; 

class HiddenRow extends React.Component { 
    render() { 
    return (
     <tr className="hidden-row"> 
     <td>Stuff</td> 
     </tr> 
    ); 
    } 
} 

class NormalRow extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    console.log('here'); 
    // Expand rows if hidden change icon to fa-minus-circle 
    // Hide rows if not and change icon to fa-plus-circle 
    } 

    render() { 
    return (
     <tr> 
     <td><i className="fa fa-plus-circle" onClick={this.handleClick}></i> Hello</td> 
     </tr> 
    ); 
    } 
} 

class ParentDiv extends React.Component { 
    render() { 
    return (
     <div> 
     <table> 
      <tbody> 
      <NormalRow /> 
      <HiddenRow /> 
      <HiddenRow /> 
      <NormalRow /> 
      <HiddenRow /> 
      <HiddenRow /> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 
}

編輯：表將擁有多套普通行和隱藏行。點擊正常行中的圖標應該只切換兩個直接隱藏的行。我使用JQuery在使用Angular時切換到React。作爲解決方案，我一直在使用React與W/JQuery進行遊戲。

來源

2016-03-19 Adam

您需要一種在NormalRow組件和兩個HiddenRow組件之間進行通信的方式。在你的代碼的最佳方式是在ParentDiv來管理它，如下所示：

class ParentDiv extends React.Component { 
    constructor() { 
    this.state = { 
     displayHiddenRows: false 
    } 
    } 

    render() { 
    return (
     <div> 
     <table> 
      <tbody> 
      <NormalRow onClick={this.handlePlusClicked.bind(this)} /> 
      <HiddenRow show={this.state.displayHiddenRows} /> 
      <HiddenRow show={this.state.displayHiddenRows} /> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 

    handlePlusClicked() { 
    this.setState = { 
     displayHiddenRows: true 
    } 
    } 
}

在隱藏的行由展示道具添加一個條件的類名。在普通行中用this.props.onClick函數替換handleClick。

來源

2016-03-19 14:26:51

這可能只是打開它們，但不確定它會在第二次點擊時隱藏它們。認爲句柄應該是'this.setState = {displayHiddenRows：！this.state.displayHiddenRows}' – Adam

另外我的例子將有多組普通/隱藏行。 – Adam

它看起來像NormalRow和幾個HiddenRow s跟隨是相同的控制的一部分。也就是說，我會考慮爲它們創建一個單獨的React組件，它將封裝單擊事件處理以及底層「正常」和「隱藏」行的查看/隱藏邏輯。所有這些都可以在純React中實現（所以不需要jQuery）。

由新的更高級別組件生成的標記可以是單個或三個錶行，具體取決於其狀態。但由於render方法不能返回多個元素，因此您需要使用包裝器，而我的首選項爲<tbody>（與例如<div>相反，這種情況在這種情況下往往會被濫用）。據我所知，你可以有任意多的<tbody>標籤在一個表中，因此，這將是一個有效的選擇。

有了這個新的組件（我們稱之爲ActiveRow）您ParentDiv成分是這樣的：

class ParentDiv extends React.Component { 
    render() { 
    return (
     <div> 
     <table> 
      <ActiveRow /> 
      <ActiveRow /> 
     </table> 
     </div> 
    ); 
    } 
}

通知我在這裏刪除<tbody>包裝，因爲它是現在ActiveRow返回。

來源

2016-03-19 18:25:14

React ES6 onClick更改其他組件

回答

相關問題