Griddleでブートストラップモーダルを開くcustomComponentをクリック

Question

私はブーストラップモーダルとグリドルテーブルを処理するのにexport default React.createClassをうまく使っています。

ここで、ユーザーがGriddleの特定の列をクリックすると、Modalを開きたいとします。これは、クリックコード/イベントを処理するカスタムコンポーネントを使用して行います。しかし、カスタムコンポーネントは新しい別のクラスとして定義されているので、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>) 
    } 

})