4

React Griddle で、行をクリックして (1 回だけ) 行の色を変更できる人がすでにいるのではないかと思っています。

私は JQuery や Griddle Metadata を使って実験していますが、よりクリーンな方法で実行できるのでしょうか?

編集:私は React 15、MantraJS/Meteor 内の Griddle を使用しており、Mantra コンテナーを使用して反応コンポーネントでデータを取得しています。

onClick イベントを使用してデータを取得できますが、onClick イベントで背景色を切り替えたり、メタデータで遊んだりできません。

ありがとう ！

編集:別のビューを使用してテーブルのコンテンツを表示するので、今のところ、テーブル セルの背景を変更する必要はありませんが、解決策が見つかった場合は、この投稿を完了します

4

2 に答える 2

4

これを行うには、 react-griddle propsrowMetadataを使用できます。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>

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

于 2016-09-10T15:36:52.023 に答える