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

我正在使用React、jQuery和Twitter引导。我有四个显示标题/文本的面板。这些面板还有一个按钮，用于打开模式窗口（引导模式），以编辑面板中的文本。我似乎不知道如何将模式窗口上的标题更改为单击按钮的相应面板标题

我知道如何使用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')
);

var问题=[
{id:0，标题：“一”，答案：[1,2,3,4,5]}，
{id:1，标题：'two'，答案：[1,2,3,4,5]}，
{id:2，标题：“三”，答案：[1,2,3,4,5]}，
{id:3，标题：'four'，答案：[1,2,3,4,5]}，
];
var EditButton=React.createClass({
render:function（）{
返回(
);
}
});
var SaveButton=React.createClass({
handleClick:function（）{
console.log（“关闭模式”）；
$（'editLPSModal'）.modal（'hide'）；
},
render:function（）{
返回(
拯救
);
}
});
var Panel=React.createClass({
render:function（）{
返回(
{this.props.title}
{this.props.answers}
);
}
});
var LearnerPreferences=React.createClass({
onClick:function（）{
$（'#editLPSModal'）.modal（）；
},
getInitialState:函数（）{
返回{
标题：“模态标题”
};
},
render:function（）{
var panels=questions.map（函数（问题）{
返回（）；
});
返回(
{面板}
&时代；
{this.state.title}
接近
);
}
});
反应(
React.createElement（LearnerPreferences，{questions:questions}），
document.getElementById（'容器'）
);

如果您只想更新标题，只需使用

this.setState（{title:“New title”}）更新组件的状态（因为您已经将标题作为状态）如果Zane的解决方案不起作用，问题可能是$.modal做了一些奇怪的事情。考虑从jQuery Bootstrap切换到Bootstrap并使用模态组件@ @ ZaneM。我想这是我一直在寻找的一部分。我还遇到了一个问题，事件没有从按钮到处理程序冒泡。“我不知道为什么，”FakeRainBrigand说，“我甚至不知道他们有react的引导程序。这看起来很有希望，我会看看。谢谢