Выбор строки в React Griddle и изменение цвета фона tr

Question

Мне просто интересно, если кто-то уже смог изменить цвет строки в React Griddle, нажав на нее (только один раз).

Я экспериментирую с JQuery и даже с метаданными Griddle, но это может быть сделано более чистым способом?

Редактировать: Я использую React 15, Griddle внутри MantraJS/Meteor, получая данные в моем компоненте реакции, используя контейнер Mantra.

Я могу получить данные с помощью события onClick, но не смог переключить цвет фона в событии onClick или сыграть с Metadatas.

Спасибо!

EDIT: Я использую другой вид для отображения содержимого таблицы, поэтому сейчас мне не нужно, чтобы изменить фон моих таблиц клеток, но если бы я нашел решение, я закончить этот пост

Answer 1

вы можете использовать реагировать-Griddle реквизита 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 добавить цвета или любые стили вы хотите применить к выбранная строка.

Обратите внимание, что более удобный API для выбора строк был вызван в Griddle Github issues.