반응 격자에서 행 선택 및 tr 배경색 변경

Question

누군가가 이미 React Griddle에서 한 번만 클릭하여 행의 색상을 변경할 수 있는지 궁금합니다.

저는 JQuery로, 심지어는 철자 메타 데이터로 실험하고 있지만 더 깨끗한 방법으로 수행 할 수 있습니까?

편집 : Mantra 컨테이너를 사용하여 반응물 ​​구성 요소에있는 데이터를 가져 오는 MantraJS/Meteor 내부에있는 React 15, Griddle을 사용하고 있습니다.

onClick 이벤트를 사용하여 데이터를 가져올 수 있지만 onClick 이벤트에서 배경색을 전환하거나 Metadatas에서 재생할 수 없습니다.

감사합니다.

편집 : 나는 지금 내 테이블 세포의 배경을 변경할 필요가 없습니다 있도록 테이블의 내용을 표시하는 다른보기를 사용하지만, 나는 해결책을 발견하는 경우이 게시물을 완료 할 수 있습니다

Answer 1

당신은이 작업을 수행하는 반응-철판 소품 rowMetadata 및 onRowClick을 사용할 수 있습니다 : 당신이 use custom styles 당신이에 적용 할 어떤 스타일 색상을 추가하거나 할 수 있도록

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 클래스를 추가합니다 선택된 행.

Griddle Github issues에는 행을 선택하기위한보다 편리한 API가 필요합니다.