Javascript 如何在React中处理事件_Javascript_Reactjs

Javascript 如何在React中处理事件

javascript reactjs

Javascript 如何在React中处理事件,javascript,reactjs,Javascript,Reactjs,我有简单的hello world代码： import React from 'react'; class ShoppingList extends React.Component { getComponent(event) { console.log('li item clicked!'); event.currentTarget.style.backgroundColor = '#ccc'; } render() {

我有简单的hello world代码：

import React from 'react';

class ShoppingList extends React.Component {

    getComponent(event) {
        console.log('li item clicked!');
        event.currentTarget.style.backgroundColor = '#ccc';
    }

    render() {
        return (

            <div className="shopping-list">
                <h1>This is props name: {this.props.name}</h1>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
                <div>
                    <ul>
                        <li onClick={this.getComponent.bind(this)}>Component 1</li>
                    </ul>
                </div>
            </div>

        );
    }
}

module.exports = ShoppingList;

路线： index.js：

var express = require('express');

var router = express.Router();

router.get('/', function (req, res) {
    res.render('index', {name:"AHOJ"});
});

module.exports = router;

index.jsx：

import React from 'react';


var ShoppingList = require('./components/ShoppingList');

class IndexComponent extends React.Component {
    constructor(props) {
        super(props);
        this.getComponent = this.getComponent.bind(this);
    }

    getComponent(event) {
        console.log('li item clicked!');
        event.currentTarget.style.backgroundColor = '#ccc';
    }
    render() {
        return (

            <DefaultLayout name={this.props.name}>
                <div>
                    <ul>
                        <li onClick={this.getComponent}>Component 1</li>
                    </ul>
                </div>
            </DefaultLayout>

        )
    }
};

module.exports = IndexComponent;

从“React”导入React；
var ShoppingList=require（“./components/ShoppingList”）；
类IndexComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.getComponent=this.getComponent.bind（this）；
}
getComponent（事件）{
log（'li项已单击！'）；
event.currentTarget.style.backgroundColor='#ccc'；
}
render（）{
返回(

组件1

)
}
};
module.exports=IndexComponent；

master.jsx：

var React = require('react');

class MasterLayout extends React.Component {
    render() {
        return (
            <html lang="eng">
                <head>
                    <meta charset="utf-8" />

                    <title>{this.props.name}</title>
                    <meta name="description" content="The HTML5 Herald" />
                    <meta name="author" content="SitePoint" />
                    <link rel="stylesheet" type="text/css" href="/public/css/main.css" />
                </head>
                <body>
                    {this.props.children}
                </body>
            </html>
        )
    }
};

module.exports = MasterLayout;

var React=require（'React'）；
类MasterLayout扩展了React.Component{
render（）{
返回(
{this.props.name}
{this.props.children}
)
}
};
module.exports=主布局；

我希望，这段代码对您来说很清楚，它是hello world项目。在完整的示例中是class

ShoppingList

：

IndexComponent

我读了一些教程，我认为，我的代码是正确的，页面渲染成功。没有错误，
一切正常，但处理程序不工作

拥有而不是数据反应ID
这不是您应该如何构造组件的。这样做：

class ShoppingList extends React.Component { constructor(props) { super(props); this.getComponent = this.getComponent.bind(this); } getComponent(event) { console.log('li item clicked!'); event.currentTarget.style.backgroundColor = '#ccc'; } render() { return ( <div className="shopping-list"> <h1>This is props name: {this.props.name}</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> </div> ); } }

class ShoppingList扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.getComponent=this.getComponent.bind（this）； } getComponent（事件）{ log（'li项已单击！'）； event.currentTarget.style.backgroundColor='#ccc'； } render（）{ 返回( 这是道具名称：{This.props.name} 项目1 项目2 项目3 组件1 ); } }
我在这里所做的是为您的组件创建了一个构造函数。构造函数调用，以便使用
this
关键字
在构造函数中使用时，super关键字单独出现，必须在使用this关键字之前使用。此关键字还可用于调用父对象上的函数
然后，它调用
.bind（this）
并将
getComponent
绑定到组件。现在可以将
onClick
处理程序更改为
onClick={this.getComponent}
。将对
.bind（）
的调用移动到构造函数中可以显著提高性能，因为现在该方法只绑定一次，而不是在每次呈现组件时反复绑定

额外提示：将
getComponent
参数的名称从
event
更改为其他名称<代码>事件在JS中不是保留关键字，但在IE的某些版本中它是全局性的。要追踪它，相当棘手的错误。
你不应该这样构造你的组件。这样做：

class ShoppingList extends React.Component { constructor(props) { super(props); this.getComponent = this.getComponent.bind(this); } getComponent(event) { console.log('li item clicked!'); event.currentTarget.style.backgroundColor = '#ccc'; } render() { return ( <div className="shopping-list"> <h1>This is props name: {this.props.name}</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> </div> ); } }

class ShoppingList扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.getComponent=this.getComponent.bind（this）； } getComponent（事件）{ log（'li项已单击！'）； event.currentTarget.style.backgroundColor='#ccc'； } render（）{ 返回( 这是道具名称：{This.props.name} 项目1 项目2 项目3 组件1 ); } }
我在这里所做的是为您的组件创建了一个构造函数。构造函数调用，以便使用
this
关键字
在构造函数中使用时，super关键字单独出现，必须在使用this关键字之前使用。此关键字还可用于调用父对象上的函数
然后，它调用
.bind（this）
并将
getComponent
绑定到组件。现在可以将
onClick
处理程序更改为
onClick={this.getComponent}
。将对
.bind（）
的调用移动到构造函数中可以显著提高性能，因为现在该方法只绑定一次，而不是在每次呈现组件时反复绑定
额外提示：将
getComponent
参数的名称从
event
更改为其他名称<代码>事件在JS中不是保留的关键字，但在IE的某些版本中它是全局性的。要追踪它，相当棘手的错误。
将您的li更改为：

<li onClick={() => this.getComponent}>Component 1</li>

this.getComponent}>组件1
这样，它将在实际单击时正确引用，而不是在渲染时正确引用。
将li更改为：

<li onClick={() => this.getComponent}>Component 1</li>

this.getComponent}>组件1

这样，它将在实际单击时正确引用，而不是在渲染时正确引用。
仅供参考，您还可以使用无状态功能组件并使用存储在常量中的方法：
如果单击标题，它将显示：

[object HTMLHeadingElement] element clicked!!! -------
当然，如果需要扩展组件类，可以使用它，但如果使用目标而不是当前目标，则无需创建构造函数：

她
[object HTMLHeadingElement] element clicked!!! -------

import React, {Component} from 'react'; import { render } from 'react-dom'; class App extends Component { clickHandler(e){ console.log(e.target); e.target.style.backgroundColor = '#ccc'; } render(){ return( <div> <ul> <li style={{border:"solid 1px"}} onClick={this.clickHandler} >Click Me</li> </ul> <h2 onClick={this.clickHandler}>I'm a header</h2> </div> ); } } render(<App />, document.getElementById('root'));