Question

我的目标是在用户单击包裹在onClick组件上的div时调用Media事件处理程序，但是我一直在碰壁。这是我的脚本：

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：无法读取未定义的属性“ onClick”

Answer 1

使用箭头功能。

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

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

如何在React中的render（）中调用事件处理程序

1 个答案: