MVC-ReactJS 버튼 onclick 이벤트가 실행되지 않습니다.

Question

일부 텍스트에 버튼 클릭 이벤트를 캡처하거나 경고를 받기 위해 간단한 작업을하고 있습니다. ReactJS JSX 코드는 아래에 붙여 넣습니다.

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

}); 클릭 이벤트에 this.state.message 값을 변경

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

버튼은 HTML 페이지에 렌더링하지만,없는 얻을 : 같은

내가 MVC의 cshtml에 SearchBar 구성 요소 위에 사용합니다. 어디서 실수합니까?

Answer 1

어쩌면 당신이 그렇게 원하는 :

render: function() { return <div> <button onClick={this.test1}>Change Message</button> {this.state.message} </div> }

사용 this 대신 self

Answer 2

이 문제에 대해 신경 쓸 필요가 두 가지

1. 모든 jsx 추가가 있습니다 에프 cshtml 또는 Views \ Shared_Layout.cshtml 파일에서 스크립트 태그를 사용하거나 번들을 사용합니다. 예 : System.Web.Optimization.Scripts.Render ("~/번들/주")

2. 전화 그 이후 @Html.ReactInitJavaScript() 방법 @ .

이제 이벤트를 반드시 클릭하십시오.