Question

以下是我的代码段

子类功能（handleClick）

import React, { Component } from 'react';
import {render} from 'react-dom';

export class Badge extends Component {
  handleClick() {
    alert("this and that")
  }
  render() {
    return (
      <button whenClicked={this.handleClick} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

父类

export class Dropdown extends Component {
  render() {
    return (
      <div className="dropdown">
        <Badge onClicked={this.props.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret" />
      </div>    
    );
  }
}

在上面的代码中，每当我尝试在子类中调用handleClick函数时，它都无法正常工作。

Answer 1

你让父母和孩子混淆了。 Dropdown组件呈现Badge组件，因此Dropdown是父类。事件处理程序也称为onClick。

这是代码（在ES5中）：

<强>下拉

var React = require('react');
var Badge = require('./Badge.react');

var Dropdown = React.createClass({

    whenClicked: function() {
        console.log('blabla');
    },

    render: function () {
        return (
            <div className="dropdown">
                <Badge whenClicked={this.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret"
                subTitle="subTitle" />
            </div>  
        );
    }
});

module.exports = Dropdown;

<强>徽章

var React = require('react');

var Badge = React.createClass({

    render: function () {
        return (
            <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
                {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
            </button> 
        );
    }
});

module.exports = Badge;

在ES6中：

<强>徽章

import React from 'react';

class Badge extends React.Component {
    handleClick() {
        this.props.whenClicked();
    }
    render() {
        return (
            <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
                {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
            </button>
        );
    }
}

module.exports = Badge;

<强>下拉

import React from 'react';
import Badge from './Badge.react';

class Dropdown extends React.Component {
    whenClicked() {
        console.log('blabla');
    }

    render() {
        return (
            <div className="dropdown">
                <Badge whenClicked={this.whenClicked} className="btn btn-default"
                title={this.props.title} subTitleClassName="caret" subTitle="subTitle"/>
            </div>
        );
    }
}

module.exports = Dropdown;

Answer 2

正如其他人所指出的，点击事件属性的正确名称是onClick（不是whenClick）。

徽章（儿童）：

import React, { Component } from 'react';
import {render} from 'react-dom';

export class Badge extends Component {
  render() {
    return (
      <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

这让我想知道：您的this.props.whenClicked定义在哪里，您希望从Dropdown传递到Badge？

我想你也希望在Dropdown中定义它并将其作为this.whenClicked传递。

下拉列表（父级）：

export class Dropdown extends Component {
  whenClicked(event) {
      // Your event handler
  },
  render() {
    return (
      <div className="dropdown">
        <Badge whenClicked={this.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret" />
      </div>    
    );
  }
}

回顾一下：

您的whenClicked已在Dropdown中定义，并作为属性传递到Dropdown实例..
在徽章中，您定义了一个名为onClick的{{1}}侦听器，该侦听器调用您从下拉列表中传递的handleClick。

Answer 3

下拉类应定义单击徽章时将调用的操作。
您需要将委托作为徽章的属性传递给此功能。你可以随意打电话给你。
在徽章类中，您需要将'whenClicked'更改为onClick并传递this.props.theNameOfTheFunction

如何在React JS中调用子类中的父类函数

3 个答案: