爲什麼React事件不會觸發？

我正在用Webpack創建一個同構應用程序，React-Engine，使用React-Engine example表示。我終於完成了，所以代碼正確呈現，但我遇到了一個新問題，標準事件沒有解僱。我點擊按鈕，「clicked」應該寫入控制檯，但它不起作用。代碼在bundle.js中，我在函數中添加了一個斷點，但沒有任何事情發生。這不是我的第一個React應用程序，但這是我第一次使用React-Engine，所以我敢打賭它與我使用React-Engine和React-Router的方式有關。 public/index.js中的函數，我猜想是加載新的視圖文件，在我的項目中永遠不會調用。你能明白爲什麼我的活動不會開火嗎？爲什麼React事件不會觸發？

Server.js

require('node-jsx').install(); 
var express = require('express'); // call express 
var app = express(); // define our app using express 
... 
var renderer = require('react-engine'); 
... 
var engine = renderer.server.create(); 
app.engine('.jsx', engine); 
app.set('views', __dirname + '/public/views'); 
app.set('view engine', 'jsx');  
app.set('view', renderer.expressView); 
app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res) { 
    res.render('app', { 
    title: 'React Engine Express Sample App', 
    }); 
});

公共/ index.js

var client = require('react-engine').client; 
var Routes = require('./routes.jsx'); 
var AppHandler = require('./views/appHandler.jsx'); 

// boot options 
var options = { 
    routes: Routes, 

    // supply a function that can be called 
    // to resolve the file that was rendered. 
    viewResolver: function(viewName) { 
     console.log(viewName) 
    return require('./views/' + viewName); 
    } 
}; 

document.addEventListener('DOMContentLoaded', function onLoad() { 
    client.boot(options); 
});

公共/ routes.js

var React = require('react'); 
var Router = require('react-router'); 

var AppHandler = require('./views/appHandler.jsx'); 
console.log(AppHandler); 
//var Account = require('./views/account.jsx'); 

var routes = module.exports = (
    <Router.Route path='/' handler={AppHandler}></Router.Route> 
);

公共/視圖/ appHandler.jsx

var React = require('react'); 
var RouteHandler = Router.RouteHandler; 
var App = require('./app.jsx'); 

var AppHandler = React.createClass({ 
    render: function() { 
     return (
      <App {...this.props} ></App> 
     ); 
    } 
}); 

module.exports = AppHandler;

公共/視圖/ app.jsx

var React = require('react'); 
module.exports = React.createClass({ 
    clicked: function() { 
     console.log("clicked"); 
    }, 
    render: function render() { 
     return (
      <html> 
       <body> 
        {this.props.title} 
        <button onClick={this.clicked}>button</button> 
       </body> 
       <script src='/bundle.js'></script> 
      </html> 
     ); 
    } 
});

來源

2015-09-07 EasilyBaffled

當您點擊按鈕時，會執行任何操作（例如一個錯誤）記錄到控制檯？你能確認你看到按鈕嗎？ – warchinal

我可以看到按鈕，我可以看到this.props.title。沒有任何記錄到控制檯，並且當我在該函數上放置斷點時，什麼都不會發生。 – EasilyBaffled

爲了幫助診斷問題，我強烈建議下載Facebook的反應[dev-tools]（https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en） – warchinal

我可以問，如果你正在使用的MacBook，並使用觸控板？當我使用material-ui並做出反應時，我得到了相同的場景。我發現點擊事件沒有被解僱，因爲我使用的是觸摸板，實際上是觸發事件。

因此，如果您使用觸摸板，則可以添加以下代碼以啓用觸摸事件。

var React = require('react'), 
injectTapEventPlugin = require("react-tap-event-plugin"); 
injectTapEventPlugin();

然後再試一次。

來源

2015-09-08 01:29:58 uncledu

這將是美好的如果這件事很簡單。我正在使用一個macbook和一個觸摸板，但不幸的是你的解決方案沒有解決這個問題。我什至嘗試使用'React.initializeTouchEvents（true）;'但仍然沒有 – EasilyBaffled

@EasilyBaffled我試過你的代碼，並且它能正常工作。 – uncledu

我沒有足夠的聲望發佈截圖，我把它放在這裏[link]（http://www.lovelyjs.com/index.php/2015/09/09/code-and-result-screenshots/） – uncledu

我被困在同一個地方，所以我認爲可能有問題的機智設置項目，可能是反應引擎，甚至是方法（可以是服務器端渲染 - 這就是爲什麼你得到的頁面和事件aren' t呈現在那裏着火）

您是否解決了您的問題？

編輯：我發現解決方法，實際上可以幫助。關鍵是要在app.jsx移動腳本客戶端應該在渲染有圖書館頭的方法，並呼籲run_script.js腳本

render: function() { 
return (
    <div> 
    <head> 
     <script src="https://fb.me/react-0.14.7.js"></script> 
     <script src="https://fb.me/react-dom-0.14.7.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> 
    </head> 

    <div> 
     <div id="content" align="center"></div> 
     <script type="text/babel" src="/run_script.js"></script> 
    </div> 
    </div> 
);

}

和run_script.js長相（對我來說）就像

var Counter = React.createClass({ 
getInitialState: function(){ 
    return { 
    test: "false" 
    }; 
}, 
handleChange: function(event){ 
    this.setState({test: event.target.value}); 
}, 
render: function() { 
    return (
    <div id="example"> 
     <input value={this.state.test} 
     onChange={(e)=>{this.setState({test: 'true'})} } 
     /> 

     {this.state.test} 
    </div> 
    ); 
} 
}); 

ReactDOM.render(
    <Counter />, 
    document.getElementById('content') 
);

希望這有助於

來源

2016-02-09 11:54:58

爲什麼React事件不會觸發？

回答

相關問題