如何使用react更改单击时的模态窗口文本？

Question

我正在使用React，jQuery和Twitter Bootstrap。我有四个显示标题/文字的面板。这些面板还有一个按钮，可以打开一个模态窗口（Bootstrap模式）来编辑面板中的文本。我似乎无法弄清楚如何将模态窗口上的标题更改为单击按钮的相应面板标题。

我知道如何使用jQuery执行此操作，但我无法弄清楚如何使用React执行此操作。

以下是我正在使用的代码

var questions = [
    {id: 0, title: 'one', answers: [1,2,3,4,5]},
    {id: 1, title: 'two', answers: [1,2,3,4,5]},
    {id: 2, title: 'three', answers: [1,2,3,4,5]},
    {id: 3, title: 'four', answers: [1,2,3,4,5]},
];

var EditButton = React.createClass({
    render: function() {
        return (
            <button className="glyphicon glyphicon-cog" data-toggle="modal" data-target="editLPSModal" onClick={ this.props.onClick } />
        );
    }
});

var SaveButton = React.createClass({
    handleClick: function() {
        console.log('close modal');

        $('#editLPSModal').modal('hide');
    },
    render: function() {
        return (
            <button type="button" className="btn btn-success" onClick={ this.handleClick }>Save</button>
        );
    }
});

var Panel = React.createClass({

    render: function() {
        return (
            <div className="panel panel-info">
                <div className="panel-heading">
                    { this.props.title }
                    <EditButton />
                </div>
                <div className="panel-body">{ this.props.answers }</div>
            </div>
        );
    }
});

var LearnerPreferences = React.createClass({
    onClick: function() {
        $('#editLPSModal').modal();

    },
    getInitialState: function() {
        return {
            title: 'Modal Title'
        };
    },
    render: function() {
        var panels = questions.map(function(question) {
            return ( <Panel key={question.id} title={question.title} answers={question.answers.join(', ')} /> );
        });


        return (
            <div className="learner-preference">
                <div className="col-md-6">
                    {panels}
                </div>
                <div id="editLPSModal" className="modal fade" data-backdrop="static">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 className="modal-title">{this.state.title}</h4>
                            </div>
                            <div className="modal-body">
                                <form>
                                    <div className="select2" data-type="ajaxTagsById">
                                        <input type="hidden"/>
                                    </div>
                                </form>
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                                <SaveButton />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

React.render(
    React.createElement(LearnerPreferences, {questions: questions}),
    document.getElementById('container')
);