Griddle customComponent에서 부트 스트랩 모달 클릭

Question

부스트 트랩 모달 및 철판 테이블을 처리하는 데 성공적으로 export default React.createClass을 사용합니다.

사용자가 Griddle의 특정 열을 클릭 할 때 모달을 열고 싶습니다. 이 작업은 클릭 코드/이벤트를 처리하는 사용자 정의 구성 요소를 사용하여 수행됩니다. 그러나 사용자 정의 구성 요소가 새로운 다른 클래스로 정의 되었기 때문에 var editData = React.createClass 모달을 열려면 주 클래스의 상태에 액세스 할 수 없습니다.

어떻게해야합니까? 여기 코드 아래에 나는 모른다.은 내가 놓친 부분이다.

감사 칼

var editData = React.createClass({ 
    render: function() { 
     return (
      <div onClick={I DO NOT KNOW}> 
       Edit row data for id {this.props.rowData.id} 
      </div> 
     ) 
    } 
}) 

var columns = ["id", "name", "edit"] 

var columnMeta = [{ 
    columnName: "edit", 
    customComponent: editData 
}] 

export default React.createClass({ 

    close() {this.setState({ showModal: false })}, 

    open() {this.setState({ showModal: true })},  

    render() { 
     return (<div> 
     <Modal show={this.state.showModal} onHide={this.close}> 
     <Modal.Header closeButton> 
     <Modal.Title>Modal heading</Modal.Title> 
     </Modal.Header> 
     <Modal.Body> 
     Text in a modal 
     </Modal.Body> 
     <Modal.Footer> 

     <Griddle columns={columns} columnMetadata={columnMeta} /> 
     </div>) 
    } 

}) 

Answer 1

는 지주의 기능을 전달함으로써 해결했다. 여기 내가 뭘했는지 내려.

var editData = React.createClass({ 

    handleChange(){ 
     this.props.metadata.onChange("your value here") 
    }, 

    render: function() { 
     return (
      <div onClick={this.handleChange}> 
       Edit row data for id {this.props.rowData.id} 
      </div> 
     ) 
    } 
}) 

var columns = ["id", "name", "edit"] 

export default React.createClass({ 

    handleChange(e){ 
     console.log(e) 
    }, 

    close() {this.setState({ showModal: false })}, 

    open() {this.setState({ showModal: true })},  

    render() { 

     var columnMeta = [{ 
      columnName: "edit", 
      customComponent: editData, 
      onChange: this.handleChange 
     }] 

     return (<div> 
     <Griddle columns={columns} columnMetadata={columnMeta} /> 
     </div>) 
    } 

})