如何在 React 中调用 render() 中的事件处理程序

Question

我的目标是在用户单击环绕在 Media 组件周围的 div 时调用 onClick 事件处理程序，但我总是碰壁。这是我的脚本：

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Media } from 'reactstrap';

var items = require('./feedData.json');

class App extends Component {
  constructor(props) {
    super(props);
  }

  onClick = (event) => {
    alert('x');
  }

  render() {
    return (
      <div className="App">
        {
            items.map(function(item) {
                return (
                    <div onClick={this.onClick}>
                    <Media>
                      <Media body>
                        <Media heading>
                          {item.title}
                        </Media>
                        {item.body}
                      </Media>
                    </Media>
                    </div>
                )
            })
        }
      </div>
    );
  }
}

export default App;

这种特殊安排会产生以下错误：

TypeError: Cannot read property 'onClick' of undefined

Answer 1

使用箭头函数。

    items.map((item) => {
        return (
            <div onClick={this.onClick}>
                <Media>
                    <Media body>
                        <Media heading>
                            {item.title}
                        </Media>
                        {item.body}
                    </Media>
                </Media>
            </div>
        )
    })

我们需要确保 this 的范围指向我们的 class。

如何在 React 中调用 render() 中的事件处理程序

How to call event handlers inside render() in React

reactjs

reactstrap