React Griddleで行を選択してtrの背景色を変更する

Question

React Griddleの行の色をもう一度クリックするだけで変更できますか？

私はJQueryやGriddle Metadataを使っていても、もっとクリーンな方法で実験していますか？

編集：私はMantraJS/Meteorの内部にあるReact 15、Griddleを使用しています.Mantraコンテナを使用して反応コンポーネント内のデータを取得しています。

onClickイベントを使用してデータを取得できますが、onClickイベントの背景色を切り替えたり、Metadatasで再生することはできません。

ありがとうございます！

編集：私は今の私は、テーブルのセルの背景を変更する必要はありませんので、テーブルの内容を表示するには、別のビューを使用しますが、私は解決策を見つけた場合、私はこのポストを完了します

Answer 1

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

今これは選択<tr>要素にselectedクラスを追加し、そうすることができますuse custom styles色を追加したり、あなたがに適用するどんなスタイル：

あなたはこれを行うには反応し、鉄板の小道具rowMetadataとonRowClickを使用することができます選択された行

Griddle Github issuesでは、行を選択するためのより便利なAPIが呼び出されていることに注意してください。