Javascript Reactjs-事件未激发处理程序

我不熟悉React和ES6，所以这可能是我忽略的一个简单问题

onClick和onKeyDown事件（或该情况下的任何事件）似乎没有触发（在本例中为runSearch函数）：

从“React”导入React；
从“react dom”导入react dom；
导入“jquery”；
var SearchBar=React.createClass({
运行搜索：函数（e）{
console.log（“你好”）；
},
render:function（）{
返回(
搜寻
搜索
);
}
});
var MainContainer=React.createClass({
render:function（）{
返回(
);
}
ReactDOM.render（，document.getElementById（'container'））；

您的示例运行良好是的，谢谢，mdl似乎有问题，我在代码中为示例添加了另一个包含mdl类的组件。当我取下mdl js layout类时，它在我的页面上运行。如果您使用mdl和React，我强烈推荐React mdl包（）。与必须自己构建所有灵活性相比，使用起来要容易得多，它得到了积极的开发，而且所有者反应非常迅速。我不知道存在这种情况，谢谢大家。@Yuval也检查一下这个

import React from 'react';
import ReactDOM from 'react-dom';
import 'jquery';


var SearchBar = React.createClass({
runSearch: function(e) {
    console.log("Hello");
},
render: function() {

    return(
        <form action="#" >
            <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input className="mdl-textfield__input" type="text" onKeyDown={this.runSearch} id="search-text" />
                <label className="mdl-textfield__label" htmlFor="search-text">Search</label>
            </div>
            <label className="mdl-button mdl-js-button mdl-button--icon" onClick={this.runSearch}>
                <i className="material-icons">
                    search
                </i>
            </label>
        </form>
    );
}
});

var MainContainer = React.createClass({
render : function(){
    return(
    <div className="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
        <main className="main mdl-layout__content mdl-color--grey-100">
            <SearchBar />
        </main>
    </div>
    );
}
ReactDOM.render(<MainContainer />, document.getElementById('container'));