首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React.js,在App.js中添加绑定到.jsx页面的事件侦听器

React.js,在App.js中添加绑定到.jsx页面的事件侦听器
EN

Stack Overflow用户
提问于 2020-10-04 21:56:17
回答 1查看 181关注 0票数 1

我正在使用react.js和socket.io创建一个应用程序,我想将事件侦听器添加到我的app.js中,这些侦听器绑定到index.jsx文件中的html组件。

下面是我的App.js代码

代码语言:javascript
运行
AI代码解释
复制
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代码

代码语言:javascript
运行
AI代码解释
复制
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 &quot;react-router-dom&quot;; //pages import MainPage from &quot;./pages/index&quot; const socket = io.connect('http://localhost:4000'); class App extends Component{ render(){ return &lt;Router&gt; &lt;Switch&gt; &lt;Route exact path=&quot;/&quot; component={MainPage} &lt;/Router&gt; } } const button = documetn.getelementbyid(&quot;button&quot;); button.addeventlistener('click', () =&gt; { console.log(&quot;button clicked&quot;); }) export default App;</code></pre><div>(在上面的代码片段中,引用的id " button“是index.jsx中按钮的id )在app.js中创建事件侦听器非常重要,这样我就可以将socket.io与react.js路由一起使用。</div><div>​</div><div>任何解决方案都将不胜感激,谢谢</div><div></div>

EN

回答 1

Stack Overflow用户

发布于 2020-10-04 22:05:29

在React中,要向按钮添加事件侦听器,应在index.jsx中执行以下操作

代码语言:javascript
运行
AI代码解释
复制
    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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64200282

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档