在React Griddle中選擇一個行，並更改tr背景顏色

我只是想知道，如果有人已經能夠通過點擊它（僅一次）在React Griddle中更改行的顏色。在React Griddle中選擇一個行，並更改tr背景顏色

我正在試驗JQuery的事情，甚至使用Griddle元數據，但它可能以更清晰的方式完成？

編輯：我正在使用React 15，Griddle在MantraJS/Meteor中，使用一個Mantra容器獲取我的反應組件中的數據。

我可以通過使用onClick事件獲取數據，但無法切換onClick事件中的背景顏色或使用Metadatas進行播放。

謝謝！

編輯：我用另一種觀點來顯示該表的內容，所以現在我不需要改變我的表格單元格的背景，但是如果我發現了一個解決方案，我將完成這篇文章

來源

2016-09-10 awzx

我看過這個圖書館，這可能是React-griddle的一個很好的選擇！謝謝！ – awzx

可以使用反應 - 幹鍋道具rowMetadata和onRowClick做到這一點：

class ComponentWithGriddle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedRowId: 0, 
    }; 
    } 
    onRowClick(row) { 
    this.setState({ selectedRowId: row.props.data.id }); 
    } 
    render() { 
    const rowMetadata = { 
     bodyCssClassName: rowData => (rowData.id === this.state.selectedRowId ? 'selected' : ''), 
    }; 
    return (
     <Griddle 
     ... 
     rowMetadata={rowMetadata} 
     onRowClick={this.onRowClick.bind(this)} 
     /> 
    ); 
    } 
}

現在，這增加了selected類選擇<tr>元素，所以你可以use custom styles添加顏色或要應用到任何風格選定的行。

請注意，在Griddle Github issues中要求更方便的用於選擇行的API。

來源

2016-09-10 15:36:52 Waiski

差不多！，它現在選擇我所有的行，我試圖找出原因......因爲你的代碼看起來有意義。我不確定這個屬性是什麼：rowData.id，因爲當你嘗試在控制檯中記錄它時它是未定義的，但是，順便說一下，非常感謝;）！ – awzx

@DavidB。顯然你的數據沒有'id'字段。您需要每行的唯一標識符才能完成此項工作。你可以在我的代碼中（'row.props.data.id'和'rowData.id'）將'id'切換到你擁有的唯一字段。 – Waiski

實際上，我無法訪問元數據聲明中的rowData._id，但字段_id存在（我使用MeteorJS和MongoDB） – awzx

在React Griddle中選擇一個行，並更改tr背景顏色

回答

相關問題