javascript - React.js，在 App.js 中添加与 .jsx 页面相关的事件监听器

Question

我正在使用 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;

通常，您只需通过在 <script 标记中添加事件侦听器或使用 <script src="fileName.js" 并将事件侦听器添加到 fileName.js 来引用一段 html 代码。有没有办法引用 app.js 中的 index.jsx 代码来使用事件侦听器并根据 socket.io 服务器和客户端之间传递的数据编辑 html 组件？有没有类似的东西可以工作（注意上面的几行“导出默认应用程序；”）...

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;

（在上面的代码片段中，被引用的 id “button” 是 index.jsx 中按钮的 id）在我的 app.js 中创建事件侦听器至关重要，这样我就可以将 socket.io 与react.js 路由。

任何解决方案将不胜感激，谢谢

标签： javascriptreactjsdom-events

Answer 1

在 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