在 Griddle customComponent 上单击打开 Bootstrap 模式答案

【问题标题】：Open Bootstrap modal on Griddle customComponent click在 Griddle customComponent 上单击打开 Bootstrap 模式
【发布时间】：2016-09-02 19:04:36
【问题描述】：

我成功地使用export default React.createClass 处理了一个 Boostrap Modal 和一个 Griddle 表。

现在我想在用户点击 Griddle 的特定列时打开 Modal。这是通过使用处理点击代码/事件的自定义组件来完成的。但是由于自定义组件被定义为一个新的不同类var editData = React.createClass我无法访问主类的状态来打开模态。

我应该如何进行？在下面的代码中，I DO NOT KNOW 是我缺少的部分。

谢谢卡尔

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>)
    }

})

【问题讨论】：

标签： javascript reactjs griddle

【解决方案1】：

通过在props中传递一个函数来解决。在这里记录下我所做的。

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>)
    }

})

【讨论】：