我正在使用react.js和socket.io创建一个应用程序,我想将事件侦听器添加到我的app.js中,这些侦听器绑定到index.jsx文件中的html组件。
下面是我的App.js代码
import React, { Component } from 'react';
import io from 'socket.io-client';
import{
BrowserRouter as Router,
Route,
Switch,
Link,
Redirect
} from "react-router-dom";
//pages
import MainPage from "./pages/index"
const socket = io.connect('http://localhost:4000');
class App extends Component{
render(){
return <Router>
<Switch>
<Route exact path="/" component={MainPage}
</Router>
}
}
export default App;
下面是我的index.jsx代码
import React from 'react';
import { Link } from 'react-router-dom';
const MainPage = () => {
return(
<div>
<h1>In main page</h1>
<button id="button">
SPOMBER
</button>
</div>
);
}
export default MainPage;
通常,您可以通过在< fileName.js标记中添加和事件侦听器来引用一段html代码,或者使用<div></div><pre><code>import React, { Component } from 'react'; import io from 'socket.io-client'; import{ BrowserRouter as Router, Route, Switch, Link, Redirect } from "react-router-dom"; //pages import MainPage from "./pages/index" const socket = io.connect('http://localhost:4000'); class App extends Component{ render(){ return <Router> <Switch> <Route exact path="/" component={MainPage} </Router> } } const button = documetn.getelementbyid("button"); button.addeventlistener('click', () => { console.log("button clicked"); }) export default App;</code></pre><div>(在上面的代码片段中,引用的id " button“是index.jsx中按钮的id )在app.js中创建事件侦听器非常重要,这样我就可以将socket.io与react.js路由一起使用。</div><div></div><div>任何解决方案都将不胜感激,谢谢</div><div></div>
发布于 2020-10-04 22:05:29
在React中,要向按钮添加事件侦听器,应在index.jsx
中执行以下操作
import React, { useCallback } from 'react';
import { Link } from 'react-router-dom';
const MainPage = () => {
const handleClick = useCallback((e) =>{
console.log("button clicked");
}, []);
return(
<div>
<h1>In main page</h1>
<button id="button" onClick={handleClick}>
SPOMBER
</button>
</div>
);
}
export default MainPage;
点击这里查看更详细的指南:https://reactjs.org/docs/handling-events.html
https://stackoverflow.com/questions/64200282
复制相似问题