MVC-ReactJS按钮的onclick事件未触发

问题描述

我正在创建一些简单的东西，试图将按钮单击事件捕获为一些文本或得到一些警报. ReactJS JSX代码粘贴如下:

I am creating simple stuff seeking for capturing button click event to some text or get some alert. ReactJS JSX code is pasted below:

var SearchBar = React.createClass({
getInitialState: function() {
    return {message: "test"};
},
test1: function(e) {
    alert('hi');
    this.setState({message: "New Message"});
},
render: function() {
    var self = this;
    return (
        <div>
            <button onClick={self.test1}>Change Message</button>
            {this.state.message}
        </div>
    );
},

});

我在MVC cshtml中的SearchBar组件上方使用以下代码:

I use above SearchBar component in MVC cshtml as:

@Html.React("SearchBar", new{ })

按钮在html页面上呈现，但是在单击事件时无法更改this.state.message值. 我在哪里做错了?

Button get rendered on html page, but unable to change this.state.message value on click event. Where am I doing mistake?

推荐答案

有两个需要注意的问题

1. 添加所有 jsx 文件uwins脚本标记或在cshtml或Views \ Shared_Layout.cshtml文件中使用捆绑软件.例如@ System.Web.Optimization.Scripts.Render(〜/bundles/main")

1. Add all jsx file uwins Script tag or using bundle in cshtml or in Views\Shared_Layout.cshtml file. [email protected]("~/bundles/main")

此后调用 @Html.ReactInitJavaScript() 方法.

Call @Html.ReactInitJavaScript() method after that.

现在，单击事件肯定可以正常工作.

Now Click event surely get work.

这篇关于MVC-ReactJS按钮的onclick事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！